запретить отправку формы (javascript)
у меня есть форма с текстовым вводом:
<form name="form1">
<cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>
Я хочу, чтобы он отправлялся только в определенных случаях. (Сначала я запускаю проверку ошибок)
<script>
function someFunc() {
if (1==2) {
document.form1.submit();
} else {
alert("Not submitting");
}
</script>
проблема в том, что, хотя предупреждение срабатывает нормально, каким-то образом форма все еще отправляет (нет никаких других операторов отправки, кроме одного!).
большое спасибо, если кто может пролить свет на это . . .
3 ответов
в этом подходе есть фундаментальный недостаток. В настоящее время вы говорите форме, что когда text1
изменения, то звоните someFunc()
. Если true, используйте JavaScript для отправки формы. Если ложь, продолжайте заниматься своим делом. Если вы нажмете enter в текстовом вводе, форма все равно отправится. Если есть кнопка отправки, которая нажата, форма все равно отправляется.
основной способ подойти к этому так:
<form name="form1" onsubmit="return someFunc()">
<input type="text" name="text1" id="text1">
</form>
когда отправлено from, позвоните someFunc()
. Этот функция должна возвращать true или false. Если он возвращает true, форма отправляет. Если false, то форма ничего не делает.
теперь ваш JavaScript нуждается в небольшом изменении:
<script>
function someFunc() {
if (1==2) {
return true;
} else {
alert("Not submitting");
return false;
}
}
</script>
у вас все еще могут быть другие функции, вызываемые при изменении поля, но они все равно не будут управлять окончательной подачей формы. На самом деле,someFunc()
можно вызвать другие функции для окончательной проверки перед возвратом true или false в событие onsubmit.
EDIT: документация по неявной форме представления.
EDIT 2:
этот код:
$(document).ready(function(){
$("#text1").on('change', function(event){
event.preventDefault();
});
});
останавливает обработку по умолчанию для change
событие, связанное с этим элементом. Если вы хотите повлиять на submit
событие, тогда вы сделаете это:
$(document).ready(function(){
$("#form1").submit(function(event){
event.preventDefault();
});
});
что позволит вам сделать что-то вроде этого:
$(document).ready(function(){
$("#form1").submit(function(event){
if ( $('#text1').val() !== "foo" ) {
alert("Error");
event.preventDefault();
}
});
});
var form = document.getElementById("Your Form ID");
form.addEventListener("submit", function (e) {
if ("Your Desired Conditions.") {
e.preventDefault();
}
});