AJAX로 양식의 jQuery 유효성 확인

Question

양식을 제출하는 데 AJAX를 사용하고 유효성 검사를 위해 jQuery를 사용하는 양식이 있습니다. 두 스크립트 모두 작동하지만 AJAX는 유효성 검사에서 오류가 발생하더라도 양식을 제출합니다.

내가 사용한 스크립트는 여기에 있습니다 :

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

당신이처럼 submitHandler 매개 변수에 submit() 핸들러에서 당신이 가지고있는 코드를 삽입 할 필요가 양식을 제출하기 전에 양식을 제출하십시오.

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

}); 

Answer 2

을 당신은 확인해야합니다 :

<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>