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

Question

我正在使用带有验证插件的jQuery，网址是：http://docs.jquery.com/Plugins/Validation/validate

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

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

然而，这种方法的问题在于，即使我在处理函数的最后一行加上了 return false; 语句，submitHandler 仍会提交表单。我想要阻止默认行为并停止表单提交，因为我已经通过ajax进行了提交。

在 submitHandler 函数中经过ajax代码后，我该如何阻止代码继续提交表单呢？

- Carven

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

- Zoltan

---

按照这种方式做，我得到了一个ReferenceError: e未定义的错误 e.preventDefault(); - Guillermo Siliceo Trueba

我也遇到了ReferenceError: e未定义e.preventDefault();，你知道这是什么意思吗？ - Damainman

我知道这是一个旧帖子，但如果有人遇到相同的问题，他们应该输入event.preventDefauld()。 e是事件的快捷方式。 如果你想让e起作用，在函数括号之间放置e，像这样function(e)。 - thar

好的，e并不是一个快捷方式，它是匿名函数的参数，在表单提交时调用。如果你收到一个ReferenceError: e错误消息，那么你一定在这一行中打错了字： $("#myform").submit(function(e) { - Zoltan

太棒了，这帮了我很多！ - BruneX

这不应该是被接受的答案。Ajax在验证之前就已经触发了请求。 - Ondrej Sotolar

Answer 2

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

希望这能帮到你。

- pockiiie

---

可能有助于向提问者解释event.preventDefault()的作用以及为什么它有效（或提供参考资料）。 - Sean Quinn

从版本1.12.0的源代码中可以看出，配置submitHandler将自动阻止默认行为。此外，如@user3157665所指示的那样，处理程序的签名为submitHandler(form, event)（文档与源代码不同步）。 - Younes

这应该是被接受的答案，因为验证发生在请求被触发之前。 - Ondrej Sotolar

如果出现问题，表单仍然可以提交，请检查验证规则中是否存在错误。 如果存在验证器错误（例如，无效规则），则submitHandler不会触发。 - Kunal

Answer 3

工作中 fiddle

根据jquery插件验证文档。

submitHandler（默认值：本机表单提交）

下面通过submitHandler的提交方法引用自文档，应该可以工作，但实际上并不起作用。他们说：

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

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

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

我在这里编写了一些对我有效的代码。 简单地调用你的验证插件，不要在你的验证函数参数中包含submitHandler。 不使用submitHandler来提交和防止提交，而是使用jQuery表单提交方法。如下所示。

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

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

- user9139688

Answer 4

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

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

- pilavust

---

你尝试过将焦点放在表单输入元素上，然后按下回车键吗？ - Fr0zenFyr

Answer 5

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

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

- Gregory

Answer 6

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

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

- VisioN

---

submitHandler函数似乎没有接收事件参数。 - Carven

@xEnOn 是的，这就是为什么我会单独为表单添加“submit”事件的原因。 - VisioN

Answer 7

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

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

- Miquel Adell

Answer 8

我用以下方法修复了这个问题。这是一个 jQuery 验证插件的补丁，即使在 v1.19.0 版本中也没有得到修复。

$('#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

    }
});

- Adrian P.