防止表单在 jQuery Validate 插件的 submitHandler 函数中提交

Question

我在http://docs.jquery.com/Plugins/Validation/validate 上使用带有验证插件的 jQuery

我想阻止表单在通过 ajax 完成验证和提交过程后提交。 我有以下代码：

$("#myform").validate({
   rules: {...},
   submitHandler: function(form) { 
      alert("Do some stuff...");
      //submit via ajax
      return false;  //This doesn't prevent the form from submitting.
   }
});

但是，问题在于submitHandler提交表单，即使我return false; 处理函数最后一行的语句。 我想阻止默认行为并阻止表单提交，因为我已经通过 ajax 提交了。

在通过submitHandler函数中的 ajax 代码后，我应该如何阻止代码提交？

Answer 1

我是这样做的，它完全按照您希望的方式工作：

$("#myform").submit(function(e) {
    e.preventDefault();
}).validate({
    rules: {...},
    submitHandler: function(form) { 
        alert("Do some stuff...");
        //submit via ajax
        return false;  //This doesn't prevent the form from submitting.
    }
});

Answer 2

$("#myform").validate({
   rules: {...},
   submitHandler: function(form, event) { 
      event.preventDefault();
      alert("Do some stuff...");
      //submit via ajax
   }
});

希望这有帮助。

Answer 3

也许您可以在不使用提交按钮的情况下进行外部验证：

if($("#myform").valid()){
    alert("Do some stuff...");
}

Answer 4

您可以在submit事件上调用event.preventDefault() ：

$("#myform").on("submit", function(event) {
    event.preventDefault();
});

Answer 5

您可以通过“jQuery Walidate”以非常简单的方式对其进行编码。 http://jquery.dop-trois.org/walidate/

在那里您可以编写一个函数，该函数将在提交时执行。 在文档中查找回调。

Answer 6

工作小提琴

根据jquery插件验证文档。

submitHandler （默认：原生表单提交）

下面通过submitHandler提交的方法是从它应该工作的文档中引用的，但实际上他们说的是行不通的

用于在表单有效时处理实际提交的回调。 获取form和submit event作为唯一参数。 替换默认提交。 在验证后通过 Ajax 提交表单的正确位置。

示例：当有效时，使用 jQuery Form 插件通过 Ajax 提交表单。

$("#myform").validate({   
   submitHandler: function(form,event) {
     event.preventDefault();
      $(form).ajaxSubmit();   
   } 
});

我在这里写代码对我有用。 只需调用您的 validayion 插件，并且submitHandler在您的验证函数参数中包含submitHandler 。

而不是使用submitHandler提交和阻止使用表单提交的 jQuery 方法。 像下面

$("form").validate({});

$(document).on("submit", "form", function (event) {
   event.preventDefault();
   alert("submit"); 
});

Answer 7

不幸的是，调用： submitHandler: function(form){似乎没有接受事件参数，所以似乎唯一的解决方案是像这样的return false语句：

...
submitHandler: function(form) {
    //your code
    return false;
},
...

Answer 8

我是这样固定的。 即使在 v1.19.0 上也未修复的 jQuery 验证插件错误的补丁

$('#save_edit_user').on('click', function () {
    var isValid = $("#edit_user").validate().form() && $("#edit_user").validate().element("#edit_user_email");
    //check current ajax call by $.active 
    //the form is not submitted before 0 ajax is running
    if (isValid && $.active == 0){
     // my save logic

    }
});