jquery form.submit() 触发处理程序，但不是实际的提交答案

【问题标题】：jquery form.submit() triggers handlers, but not the actual submitjquery form.submit() 触发处理程序，但不是实际的提交
【发布时间】：2014-03-05 13:50:59
【问题描述】：

我有一个带有提交按钮和处理程序的表单。处理程序进行一些验证，如果验证不酷，则执行 preventDefault()。

我的表单上有第二个按钮无需验证即可提交。我的思考逻辑是：这个按钮会加一个class指示，不去验证，然后触发提交。提交事件将始终检查它是否应该验证。

一些代码：

    //Add handler for no-validation submit
    $('#button-no-falco').click(function() {
        $('#form').addClass('no-falco');
        $('#form').submit();
    });


    $('#form').submit(function(e) {
        //If form has no-falco, don't validate.
        if ($(this).hasClass('no-falco')) {
            console.log("Skipping validation. Just submit.");
            return;
        }

        //Validation code

        e.preventDefault();


    });

一些 HTML：

<form role="form" method="post" action="{{action_url}}" name="edit-object">
    <!-- bunch of inputs -->
    <button type="submit" id="submit" class="btn btn-default">Save!</button>
    <button type="button" id="button-no-falco" class="btn btn-default">No validation</button>
</form>

所以现在单击 button-no-falco 按钮将导致整个验证被跳过，甚至会显示日志消息。但是实际的表单并没有被提交。

如果我单击常规提交按钮（在单击另一个按钮之后），表单会提交。

发生了什么事？

【问题讨论】：

我认为你需要添加 return true ;这里 if ($(this).hasClass('no-falco')) {console.log("跳过验证。只需提交。");返回真； }

标签： javascript jquery html forms validation

【解决方案1】：

将按钮 ID 从提交更改为其他内容

<button type="submit" class="btn btn-default">Save!</button>
<button type="button" id="button-no-falco" class="btn btn-default">No validation</button>

演示：Fiddle、with id submit

它会覆盖表单方法submit 导致.submit() 调用失败

【讨论】：

一百万年我都不会猜到。将 ID 更改为“提交按钮”，突然就可以了。
是的！拥有name=submit 或id=submit 会导致jQuery 处理程序失败！有人可以解释一下这背后的技术混乱吗？因为在我看来，这根本没有意义……o.O
@RomeoSierra It overrides the form method submit causing the .submit() call to fail, Form' 有一个 submit 属性，它是一个函数，但是当您有一个名称为 submit 的输入元素时，表单的 submit 属性值将被覆盖为元素（名称提交`参考
简而言之，这意味着 form 属性的行为有点依赖于 name 属性 不是吗？
@RomeoSierra 是的，这是一项允许您使用表单引用获取输入值的功能。例如：如果您有一个名称为年龄的输入和一个表单引用frm，那么您可以使用frm.age.value 来获取age 字段的值

【解决方案2】：

尝试添加：

var form=$('form');

【讨论】：

哦，对，马虎。我这样做了，但是我没有发布该代码。我将在我的原始帖子中对其进行编辑。

【解决方案3】：

试试，

$('.btn-default').click(function() {
  if($(this).attr('id') == 'button-no-falco') {
    $('#form').submit();
  } else {
   // add code for validation and if validation returns true then submit form
  }

});

并删除它，

$('#form').submit(function(e) {
        //If form has no-falco, don't validate.
        if ($(this).hasClass('no-falco')) {
            console.log("Skipping validation. Just submit.");
            return;
        }

        //Validation code

        e.preventDefault();


    });

【讨论】：

【解决方案4】：

你可以删除绑定然后提交，不需要添加和检查类

$('#button-no-falco').click(function() {
    form.off(); //remove all registered handlers
    form.submit();
});

小提琴：http://jsfiddle.net/978JS/4/

【讨论】：

我也喜欢这个！没想到！