AJAXでフォームのjQuery検証

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

あなたはこのように、submitHandlerパラメータにsubmit()ハンドラにあなたが持っているコードを配置する必要があります。

$(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; 

});