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

Posted 2023-05-08

【中文标题】防止表单在 jQuery Validate 插件的 submitHandler 函数中提交

【英文标题】：Preventing a form from submitting in jQuery Validate plugin's submitHandler function

【发布时间】：2012-06-03 15:37:45

【问题描述】：

我在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代码后如何阻止代码提交？

【参考方案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.
    
);

【讨论】：

完全像这样我得到 ReferenceError: e is not defined e.preventDefault();

我也得到 ReferenceError: e is not defined e.preventDefault();，知道这到底是什么意思吗？

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

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

太好了，这对我帮助很大！

【参考方案2】：

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

希望对您有所帮助。

【讨论】：

这可能有助于向提出问题的人解释event.preventDefault() 的作用，以及它为什么起作用（或提供参考）。

挂钩到1.12.0版本的源代码，很明显配置submitHandler会自动阻止默认行为。此外，正如@user3157665 所指出的，处理程序的签名是submitHandler(form, event)（文档与源代码不同步）。

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

【参考方案3】：

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

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

【讨论】：

您是否尝试将焦点放在表单输入元素上并按回车键？

【参考方案4】：

工作fiddle

根据jquery插件验证文档。

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

下面submitHandler的提交方法引用自documentation应该可以，但他们说的实际上不行

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

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

$("#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"); 
);

【参考方案5】：

您可以在submit 事件中致电event.preventDefault()：

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

【讨论】：

submitHandler函数好像没有带事件参数。

@xEnOn 是的，这就是为什么我会在表单中单独添加submit 事件。

【参考方案6】：

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

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

【参考方案7】：

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

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

【参考方案8】：

我是这样解决的。一个针对 jQuery Validation Plugin 错误的补丁，即使在 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

    
);