34

我在http://docs.jquery.com/Plugins/Validation/validate上使用 jQuery 和 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.
   }
});

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

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

4

8 回答 8

58

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

$("#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.
    }
});
于 2013-04-20T13:42:31.500 回答
42 
$("#myform").validate({
   rules: {...},
   submitHandler: function(form, event) { 
      event.preventDefault();
      alert("Do some stuff...");
      //submit via ajax
   }
});

希望这有帮助。

于 2014-04-21T14:57:00.823 回答
2

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

if($("#myform").valid()){
    alert("Do some stuff...");
}
于 2012-05-29T12:04:54.210 回答
2

工作小提琴

根据 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"); 
});
于 2018-12-17T15:29:48.390 回答
1

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

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

于 2012-05-30T07:23:00.810 回答
1

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

$("#myform").on("submit", function(event) {
    event.preventDefault();
});
于 2012-05-29T12:01:11.697 回答
0

不幸的是，似乎 call:submitHandler: function(form){不接受事件参数，所以似乎唯一的解决方案是这样的return false声明：

...
submitHandler: function(form) {
    //your code
    return false;
},
...
于 2012-06-19T07:51:29.933 回答
0

我是这样解决的。jQuery Validation Plugin bug 的补丁，即使在 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

    }
});
于 2019-02-06T17:22:18.787 回答