jQuery 验证插件：无法在 submitHandler 中调用默认提交

Posted 2023-05-09

【中文标题】jQuery 验证插件：无法在 submitHandler 中调用默认提交

【英文标题】：jQuery validation plugin: can't call default submit within submitHandler

【发布时间】：2020-11-08 19:26:00

【问题描述】：

我正在尝试使用jquery validation 设置一个表单，它在提交时首先发出一个ajax 请求，然后使用默认提交方法提交。一切正常，除了我无法触发默认提交。我的（简化的）submitHandler：

submitHandler: function(form, event)
    var successful; 
    $.ajax(
        url: myurl,
        dataType: "json",
        type: "post",
        async: false,
        contentType: "application/json",
        data: JSON.stringify(mydata),
        error: function()
            successful = false;
        
    ).done(function(response)
        if (response)
            successful = true;
         else 
            successful = false;
        ;
    );
    if (successful)
        $(form).submit();
    ;

$(form).submit() 会导致“提交循环”，但不会触发默认提交；将其替换为 form.submit() 没有任何作用。

我是否错过了如何正确触发默认提交事件的任何内容？

提前致谢

【参考方案1】：

我会将 ajax 检查的触发与 $(form).submit() 分开。在表单上放置一个“提交”按钮并在 onclick 处理程序中执行 ajax 检查。如果一切正常，则调用 $(form).submit() 无需担心循环。

  <form id="myform"...>
       ....
       <button type="button" id="submitbtn">Submit<button>
  </form>   
  

javascript...

  $("#submitbtn").click(function()  
     // put your ajax call in here
     //then 
    if (successful)
        $("#myform").submit();
    ;
  

【讨论】：

onClick事件会在表单验证之前还是之后触发？

onclick由用户点击按钮提交表单触发。但它不是链接到表单的 type="Submit" 按钮 - 它独立于表单。事实上，您可以将其放置在表单之外。如果你想。所有按钮单击都会触发对 onclick 处理程序的调用，然后该处理程序可以根据 ajax 选择是否提交表单。这有意义吗？

确实如此。问题是我希望在表单验证之后但在实际提交之前发出 ajax 请求。因此，我使用 jquery-validation 插件中的 $("form").validate() 方法和 submitHandler

我以为 ajax 正在做验证？

根据文档，您应该使用 form.submit();，而不是 $(form).submit();因为这个递归问题。 jqueryvalidation.org/documentation ...“form.submit() ...触发本机提交事件...而不是验证”