jQuery - 检查某些字段已填充，然后验证电子邮件

Question

刚刚尝试使用jQuery将两个函数拼凑在一起。在表单上提交时，代码会检查是否填写了所有字段，如果所有字段都是正确的，则会移至另一个函数，在该函数中检查电子邮件验证。

我觉得我很接近，因为当我按提交验证警报显示一毫秒，然后提交（我不希望它，因为使用的电子邮件是无效的）。我很确定它的代码很简单，因此我远离任何表单验证。

下面是代码：

<script type="text/javascript"> 
    $("#test").submit(function(){ 
     $(".error").hide(); 

     var isFormValid = true; 

     $(".required").each(function(){ 
      if ($.trim($(this).val()).length == 0){ 
       $(this).addClass("highlight"); 
       isFormValid = false; 
      } 
      else{ 
       $(this).removeClass("highlight"); 
      } 
     }); 
     if (!isFormValid) { 
      document.getElementById("error").innerHTML = "You must fill in all of the fields."; 
      return isFormValid; 
     } 
     else { 
      myFunction(); 
     } 
    }); 

    function myFunction() { 
     var isEmailValid = true; 

     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     var emailaddressVal = $("#email").val(); 

     if (!emailReg.test(emailaddressVal)) { 
      $("#email").after('<span class="error">Enter a valid email address.</span>'); 
      isEmailValid = false; 
     } 
     else { 
      ///ajax post function here/// 
     } 

     if(!isEmailValid) { 
      document.getElementById("error").innerHTML = "Please enter a valid email address."; 
      return isEmailValid; 
     } 
    } 
</script> 

Answer 1

试试这个：

<script type="text/javascript"> 
$("#test").submit(function(){ 
    $(".error").hide(); 

    var isFormValid = true; 

    $(".required").each(function(){ 
     if ($.trim($(this).val()).length == 0){ 
      $(this).addClass("highlight"); 
      isFormValid = false; 
     } 
     else{ 
      $(this).removeClass("highlight"); 
     } 
    }); 
    if (!isFormValid) { 
     document.getElementById("error").innerHTML = "You must fill in all of the fields."; 
     return isFormValid; 
    } 
    else { 
     return myFunction();//should return true or false 
    } 
}); 

function myFunction() { 
    var isEmailValid = true; 

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    var emailaddressVal = $("#email").val(); 

    if (!emailReg.test(emailaddressVal)) { 
     $("#email").after('<span class="error">Enter a valid email address.</span>'); 
     isEmailValid = false; 
    } 
    else { 
     ///ajax post function here/// 
    } 

    if(!isEmailValid) { 
     document.getElementById("error").innerHTML = "Please enter a valid email address."; 
     return isEmailValid; 
    } 
    return isEmailValid;//should return true or false 
} 
</script>