jQuery AJAX驗證表格

Question

我有一個表單，我使用AJAX提交表單和jQuery驗證。這兩個腳本都在工作，但即使驗證引發錯誤，AJAX也會提交表單。

我用的腳本是在這裏：

<script> 
    $(document).ready(function(){ 
    $("#maxmarks").validate({ 
     rules: { 
       max: { 
       number: true, 
      } 
       }, 
     messages: {    
       max: { 
       number: "Please enter a valid number", 
       } 

      }, 

     }); 

    }); 
    </script> 

<form id="maxmarks" action = "home.php" method="POST"> 

<input id="maxinput" class="required" name="max" value="5" size="3"/> 
<input type="submit" value="submit"/> 

</form> 

<script type='text/javascript'> 
$("#maxmarks").submit(function() { 
    $.ajax({ 
    url : 'update.php', 
    type : 'POST', 
    data : $("#maxmarks").serialize(), 
    success : function(res) { 
      $('#resultreturn').prepend(res); 
    } 
}); 
    return false; 
}); 
</script> 

Answer 1

你需要把你的代碼在submit()處理器在submitHandler參數，就像這樣：

$(document).ready(function(){ 
    $("#maxmarks").validate({ 
     rules: { 
      max: { 
       number: true, 
      } 
     }, 
     messages: {    
      max: { 
       number: "Please enter a valid number", 
      } 
     }, 
     submitHandler: function(form) { 
      $.ajax({ 
       url : 'update.php', 
       type : 'POST', 
       data : $(form).serialize(), 
       success : function(res) { 
        $('#resultreturn').prepend(res); 
       } 
      }); 
     } 
    }); 
}); 

Answer 2

您必須驗證在提交之前的形式。

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

    var isFormValid = $("#maxmarks").valid(); 

    if(isFormValid){ 
    $.ajax({ 
     url : 'update.php', 
     type : 'POST', 
     data : $("#maxmarks").serialize(), 
     success : function(res) { 
      $('#resultreturn').prepend(res); 
     } 
     }); 
    } 

    return false; 

});