当没有错误存在时jQuery表单不提交

Question

我有一个html表单和一些验证表单的jQuery。如果所有的验证通过，我想提交表格。当我按下但是提交，邮件出现的错误（如果有错误），当没有错误信息，提交按钮那种小摊，我得到一个错误

不响应的脚本错误

我在firefox和safari中都得到了相同的结果。

的jQuery（错误的div是所有错误的出现）：

$("#joinForm").on("submit", function (e) { 
     e.preventDefault(); 

     if (!$(':text').val() || !$(':password').val()){ 

      $('#fillIn').remove(); 
      $('#errors').append("<p id='fillIn'>Please fill in all fields</p>"); 
     } 
     else { 
      $('#fillIn').remove(); 
     } 


     if ($('#email').val()!= $('#reemail').val()){ 
      $('#noMatch').remove(); 
      $('#errors').append("<p id='noMatch'>Emails do not match</p>"); 
     } 
     else{ 
      $('#noMatch').remove(); 
     } 


     if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){ 
      $('#joinForm').submit(); 
     } 
     else{ 
      $('#errorModal').modal('show'); 
     } 

    }); 

}); 

HTML：

<form method='POST' action='join_action.php' id='joinForm'> 
    <table> 
     <tr> 
      <td>Full Name: </td><td><input type='text' name='name'></input></td> 
     </tr> 
     <tr> 
      <td>Email: </td><td><input type='text' name='email' id='email'></input></td> 
     </tr> 
     <tr> 
      <td>Re-type Email: </td><td><input type='text' name='reemail' id='reemail'></input></td> 
     </tr> 
     <tr> 
      <td>New Password: </td><td><input type='password' name='password'></input></td> 
     </tr> 
     <tr> 
      <td><input type='submit' value='Sign Up' name='signup' id='signup'></td> 
     </tr> 
    </table> 
</form> 

Answer 1

的e.preventDefault();阻止提交表单，然后手动叫submit()，这将发射另一个submit事件，因此你得到了一个无限循环。

要解决该问题，请仅在表单无效时致电preventDefault。

$("#joinForm").on("submit", function (e) { 
     var isValid = true; 

     if (!$(':text').val() || !$(':password').val()){ 
      isValid = false; 
      $('#fillIn').remove(); 
      $('#errors').append("<p id='fillIn'>Please fill in all fields</p>"); 
     } 
     else { 
      $('#fillIn').remove(); 
     } 


     if ($('#email').val()!= $('#reemail').val()){ 
      isValid = false; 
      $('#noMatch').remove(); 
      $('#errors').append("<p id='noMatch'>Emails do not match</p>"); 
     } 
     else{ 
      $('#noMatch').remove(); 
     } 


     if (isValid && $('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){ 
      // pass 
     } 
     else{ 
      $('#errorModal').modal('show'); 
      e.preventDefault(); 
     } 

    }); 

}); 

Answer 2

你最后的if语句切换到这一点：

if (!($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val())){ 
     $('#errorModal').modal('show'); 
     e.preventDefault(); 
    } 

而且从你的代码的顶部去除e.preventDefault()。

这只是改变的逻辑说：“如果我们有错误，显示模式和停止提交，否则，进行提交。”

Answer 3

试试这个：

$('#joinForm').submit(function(){ 

    if (!$(':text').val() || !$(':password').val()){ 

     $('#fillIn').remove(); 
     $('#errors').append("<p id='fillIn'>Please fill in all fields</p>"); 
    } 
    else { 
     $('#fillIn').remove(); 
    } 


    if ($('#email').val()!= $('#reemail').val()){ 
     $('#noMatch').remove(); 
     $('#errors').append("<p id='noMatch'>Emails do not match</p>"); 
    } 
    else{ 
     $('#noMatch').remove(); 
    } 


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){ 
     $('#joinForm').submit(); 
    } 
    else{ 
     $('#errorModal').modal('show'); 
    } 

    return false; 
}); 

见结束：

return false;

再见！

Answer 4

只有在出现错误时，您才应该使用e.preventDefault();。做esiest方法是，声明一个标志，并将其设置为true时，有一个错误，做这样的事情，

$("#joinForm").on("submit", function (e) { 
    var isError = false; // set the flag to false initially 

// do whatever you want. 

    if(error conditions) 
    isError = true; /// do this wherever you are expecting error 

    // do something else   

    if(isError) 
     e.preventDefault(); 
}); 

Answer 5

工作1.7.1 jQuery代码：

$(function() { 
     $("#joinForm").on("submit", function() { 
      var validForm = true; 
      if (!$(':text').val() || !$(':password').val()){ 

       $('#fillIn').remove(); 
       $('#errors').append("<p id='fillIn'>Please fill in all fields</p>"); 
       validForm = false; 
      } 
      else { 
       $('#fillIn').remove(); 
      } 


      if ($('#email').val()!= $('#reemail').val()){ 
       $('#noMatch').remove(); 
       $('#errors').append("<p id='noMatch'>Emails do not match</p>"); 
       validForm = false; 
      } 
      else{ 
       $('#noMatch').remove(); 
      } 


      if (validForm){ 
       $(this).submit(); 
      } 
      else{ 
       $('#errorModal').modal('show'); 
      } 
     return false; 
    }); 
    });