发生错误时，不要允许表单提交

Question

我有简单的注册表格：

<div id="regform">
<form id="regform2" action="" method="POST" enctype="multipart/form-data">
<table style="width:auto; min-width:80%; max-width:95%; margin:auto; border: 1px solid #29CF81;">
<tr><td colspan=3 style="background-color: #29CF81; text-align:center; font-family:Verdana; font-weight:bold; color:#ffffff;">Základné informácie</td>
<tr><td><td>&nbsp;Meno: <td><input type="text" name="firstname" size=30 />
<tr><td><td>&nbsp;Priezvisko: <td><input type="text" name="lastname" size=30 />
<tr><td><td>&nbsp;Nick: <td><input type="text" name="username" size=30 required/><font color=red><sup>*</sup></font>
<tr class='info' id='username' style='display:none;'><td><td><td><div class='infoBubble top'>Zvoľte nick s dĺžkou medzi 3 - 16 znakov</div>
<tr><td><td>&nbsp;E-mailová adresa: <td><input type="text" name="email1" size=30 required/><font color=red><sup>*</sup></font>
<tr class='info' id='email1' style='display:none;'><td><td><td><div class='infoBubble top'>Neplatná e-mailová adresa</div>
<tr><td><td>&nbsp;Potvrdiť e-mail: <td><input type="text" name="email2" size=30 required/><font color=red><sup>*</sup></font>
<tr class='info' id='email2' style='display:none;'><td><td><td><div class='infoBubble top'>Zadané e-mailové adresy sa nezhodujú</div>
<tr><td><td>&nbsp;Heslo: <td><input type="password" name="password1" size=30 required/><font color=red><sup>*</sup></font>
<tr class='info' id='password1' style='display:none;'><td><td><td><div id='passwordText' class='infoBubble top'></div>
<tr><td><td>&nbsp;Potvrdiť heslo: <td><input type="password" name="password2" size=30 required/><font color=red><sup>*</sup></font>
<tr class='info' id='password2' style='display:none;'><td><td><td><div id='passwordText' class='infoBubble top'>Zadané heslá sa nezhodujú</div>
<tr><td colspan=3 style="background-color: #29CF81; text-align:center; font-family:Verdana; font-weight:bold; color:#ffffff;">Osobné informácie</td>
<tr><td><td>&nbsp;Avatar: <td><input type="file" name="avatar" accept="image/*" />
<tr><td><td>&nbsp;Vek: <td><input type="text" name="age" size=30 />
<tr><td><td>&nbsp;Trieda: <td><select size=1 name="class" /><option value="" selected><option value="prima">Príma<option value="sekunda">Sekunda<option value="tercia">Tercia<option value="kvarta">Kvarta<option value="kvinta">Kvinta<option value="septima">Septima<option value="oktava">Oktáva<option value="1b">1.B<option value="1c">1.C<option value="1d">1.D<option value="2b">2.B<option value="2c">2.C<option value="2d">2.D<option value="3b">3.B<option value="3c">3.C<option value="3d">3.D<option value="4b">4.B<option value="4c">4.C<option value="profesor">Profesor/ka<option value="exGamca">exGAMČA</select>
<tr><td><td>&nbsp;Pohlavie: <td><input type="radio" name="gender" value="muz"/>Muž<input type="radio" name="gender" value="zena"/>Žena
<tr><td><td>&nbsp;O mne: <td><textarea type="text" name="about" rows=5 cols=40 style="resize: none;"></textarea>
<tr><td><td><input class="button" type="submit" name="submit" style="height:35px;width:120px;margin-right:5px" value="Registrovať" /><input class="button" style="height:35px;" type="reset" name="reset" value="Zmazať" />
<tr><td><td style="font-size:12px; color:gray;">&nbsp;Poznámka: Polia označené "<font color="red" size="4px">*</font>" sú povinné.
</table>
</form>
</div>

然后我有几个jQuery脚本来检查电子邮件/用户名/密码等是否有效。对于每个输入，存在一个名称为errorEmail的变量，如果有错误则值为1，或者当值为0时值为0：

<script type='text/javascript'>
$(window).load(function() {



$('input[name="email1"]').keyup(function() {

var valueEmail1 = $(this).val();
var emailRegex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var valueLength = $.trim($(this).val()).length;
if (valueLength > 0) {
if (emailRegex.test(valueEmail1)) {
$('#email1').css('display', 'none');
var errorEmail1 = 0;
}
else {
$('#email1').css('display', 'table-row');
var errorEmail1 = 1;
}

}

else {
$('#email1').css('display', 'none');
var errorEmail1 = 0;
}

});

$('input[name="email2"]').keyup(function() {

var valueEmail2 = $(this).val();
var valueLength2 = $.trim($(this).val()).length;
var valueEmail1 = $('input[name="email1"]').val();
if (valueLength2 > 0) {
if (valueEmail2 == valueEmail1) {
$('#email2').css('display', 'none');
var errorEmail2 = 0;
}       
else {
$('#email2').css('display', 'table-row');
var errorEmail2 = 1;
}

}

else {
$('#email2').css('display', 'none');
var errorEmail2 = 0;
}

}); 

$('input[name="username"]').keyup(function() {

var valueUsername = $(this).val();
var valueLength3 = $.trim($(this).val()).length;
if (valueLength3 > 0) {
if (valueLength3 >= 3 && valueLength3 <= 16 ) {
$('#username').css('display', 'none');
var errorUsername = 0;
}       
else {
$('#username').css('display', 'table-row');
var errorUsername = 1;
}

}

else {
$('#username').css('display', 'none');
var errorUsername = 0;
}

}); 

$('input[name="password1"]').keyup(function() {

var valuePassword1 = $(this).val();
var passwordRegex = /^([a-zA-Z]|[0-9]|[-]|[_]|[/]|[.])+([a-zA-Z]|[0-9]|[-]|[_]|[/]|[.])+([a-zA-Z]|[0-9]|[-]|[_]|[/]|[.])$/;
var valueLength4 = $.trim($(this).val()).length;
if (valueLength4 > 0) {

if (valueLength4 >= 6 && valueLength4 <= 18) {
if (passwordRegex.test(valuePassword1)) {
$('#password1').css('display', 'none');
var errorPassword1 = 0;
}
else {
$('#password1').css('display', 'table-row');
$('#passwordText').html('Vaše heslo obsahuje nepovolené znaky');
var errorPassword1 = 1;
}

}

else {
$('#password1').css('display', 'table-row');
$('#passwordText').html('Heslo musí byť v rozmedzí 6-18 znakov');
var errorPassword1 = 1;
}

}

else {
$('#password1').css('display', 'none');
var errorPassword1 = 0;
}

});     

$('input[name="password2"]').keyup(function() {

var valuePassword2 = $(this).val();
var valueLength5 = $.trim($(this).val()).length;
var valuePassword1 = $('input[name="password1"]').val();
if (valueLength5 > 0) {
if (valuePassword2 == valuePassword1) {
$('#password2').css('display', 'none');
var errorPassword2 = 0;
}       
else {
$('#password2').css('display', 'table-row');
var errorPassword2 = 1;
}

}

else {
$('#password2').css('display', 'none');
var errorPassword2 = 0;
}

});         


$('#regform2').submit(function(event) {
if(errorUsername == 1 || errorEmail1 == 1 || errorEmail2 == 1 || errorPassword1 == 1) {
event.preventDefault();
}

});



});

</script>

最后我跟随（不工作）：

$('#regform2').submit(function(event) {
if(errorUsername == 1 || errorEmail1 == 1 || errorEmail2 == 1 || errorPassword1 == 1) {
event.preventDefault();
}

});

最后，PHP代码在一切正常（工作）时更新数据库：

if (isset($_POST['submit'])) {
    //database update etc.
}

我想要的是，当表单中有一个（或多个）错误时，它会警告错误并停止提交表单，因此不会执行php代码。我怎样才能做到这一点？

Answer 1

 $('#regform2').submit(function(e) {
   if(errorUsername == 1 || errorEmail1 == 1 || errorEmail2 == 1 || errorPassword1 == 1) {
      e.preventDefault();
   }
 });

是你想要的。 还有它的文件： http://api.jquery.com/event.preventdefault/