使用jQuery进行表单验证（不含validation.js）

Question

我想用jQuery执行表单验证。现在，我使用HTML5“必要”的输入标签中，并为验证该代码的jQuery：

的jQuery：

$("#register").click(function() { 

    $("#register input").each(function() { 
     $(this).css('border','none'); 
     if(!$(this).val()) { 
      $(this).css('border','solid 1px red'); 
     } 
     var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     if($(this).attr("type")=="email" && !email_reg.test($(this).val())){ 
      $(this).css('border','solid 1px red'); 
     } 
    }); 

在使用IE9，有在HTML5“需要”不支持，所以虽然脚本正在运行，但它仍在运行输入操作.php文件。我很乐意知道我能否使用现有代码修复它，而不使用validate.js或其他外部文件。

HTML5：

<form id="register" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post"> 
<p><label>First name</label><input type="text" id="name" name="name" required="true" /></p> 
<p><label>Last name</label><input type="text" id="fname" name="fname" required="true" /></p> 
<p><label>Email</label><input type="email" id="email" name="email" required="true" /></p> 
<p> 
    <label>Phone</label> 
    <input id="area-code" type="text" name="code" maxlength="3" required="true" onkeydown="return isNumber(event);" /> 
    <input id="phone" type="text" name="phone" required="true" maxlength="17" onkeydown="return isNumber(event);" /> 

</p> 
<input type="submit" value="GET BONUS NOW" id="submit-btn" /> 
<?php include 'form.php';?> 

Answer 1

你需要从验证从click事件更改submit：

$("#register").submit(function() { 

并修改代码以查找错误与一些布尔标志和回报false如果发现错误：

var errors = false; 
$("#register input").each(function() { 

    $(this).css('border','none'); 
    if(!$(this).val()) { 
     $(this).css('border','solid 1px red'); 
     errors = true; 
    } 
    var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    if($(this).attr("type")=="email" && !email_reg.test($(this).val())){ 
     $(this).css('border','solid 1px red'); 
     errors = true; 
    } 
}); 
if(errors) { 
    return false; 
}