使用AJAX对表单进行jQuery验证

I have a form for which I used AJAX for submitting the form and jQuery for the validation. Both the scripts are working but the AJAX submits the form even though the validation throws an error.

我有一个表单,我使用AJAX提交表单和jQuery进行验证。两个脚本都在工作,但即使验证引发错误,AJAX也会提交表单。

The script I have used is here:

我用过的脚本在这里:

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

2 个解决方案

#1

You need to place the code you have in the submit() handler in the submitHandler parameter, like this:

您需要将您拥有的代码放在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);
                }
            });
        }
    });
});

#2

You have to validate the form before going to submit it.

您必须在提交表单之前验证表单。

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

});

#1