jQuery 验证与 Ajax 表单提交冲突[重复]答案

【问题标题】：jQuery validation conflicts with Ajax form submission [duplicate]jQuery 验证与 Ajax 表单提交冲突[重复]
【发布时间】：2013-01-14 15:45:07
【问题描述】：

可能重复：
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/) 进行表单验证：

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 函数提交的。

我还要如何使用 Ajax 功能？

【问题讨论】：

请注意：$('.formID').ajaxForm() 应该是 $('#formID').ajaxForm() 您的 ajax 正在使用类 'formID' 作用于表单

标签： jquery jquery-validate

【解决方案1】：

现在表单似乎是由validate() 函数提交的，而不是由 Ajax 函数。怎么还用Ajax功能？

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

$(document).ready(function() {

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

});

【讨论】：

【解决方案2】：

试试这个 JS：

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

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

return false;

})

【讨论】：