jQuery验证与Aj​​ax表单提交冲突 [英] jQuery validation conflicts with Ajax form submission

问题描述

可能重复:
jQuery验证:一些的必填字段未填写，但仍可以提交表单

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

我使用了jquery验证( http://bassistance.de/jquery-plugins /jquery-plugin-validation/)进行表单验证:

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);
    }
  });
});

现在，表单似乎是由validate()函数而不是由Ajax函数提交的.

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

如何仍然使用Ajax函数?

How do I still use the Ajax function?

推荐答案

现在，表单似乎是通过validate()函数提交的，而不是通过 Ajax函数.我如何仍然使用Ajax函数?

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

这是因为validate()插件已经内置了submitHandler:.这是正确使用它并避免在作用于同一submit事件的多个函数之间潜在冲突的方法.

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);
              }
          });
      }
    });

});

这篇关于jQuery验证与Aj​​ax表单提交冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！