jQuery validation conflicts with Ajax form submission [duplicate]

问题

Possible Duplicate:
jQuery validation: some of the required field not filled but the form can still be submitted

I used jquery validation (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) for form validation:

HTML:

<form id="formID" action="/processForm" method="post">
  ...
  <input type="submit" value="Submit" />
</form>

jQuery:

$("#formID").validate({
  onkeyup:false,
  rules: {
    ...
  },
  messages: {
    ...
  }
});


// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

Now the form seems to be submitted by the validate() function, not by the Ajax function.

How do I still use the Ajax function?

回答1:

Now the form seems to be submitted by the validate() function, not by the Ajax function. How do I still use the Ajax function?

That's because the validate() plugin already has a submitHandler: built-in. Here's how to use it properly and avoid potential conflicts between multiple functions acting on the same submit event.

$(document).ready(function() {

    $("#formID").validate({
      onkeyup:false,
      rules: {
        ...
      },
      messages: {
        ...
      },
      submitHandler: function(form) {
          form.ajaxForm({
              success: function(returnData) {
                  $('#content').html(returnData);
              }
          });
      }
    });

});

回答2:

try this JS:

$('#formID').on('submit',function(){

// call your function which send AJAX  reuest
// Or code of sending ajax reauest

return false;

})

来源：https://stackoverflow.com/questions/14321692/jquery-validation-conflicts-with-ajax-form-submission

标签

jquery

jquery-validate