Question

我有一个带有提交按钮和处理程序的表单。处理程序执行一些验证，如果验证不是很酷，则会执行preventDefault（）。

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

一些代码：

    //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按钮将导致跳过整个验证，甚至会显示日志消息。但是，实际表格尚未提交。

如果我点击常规提交按钮（点击其他按钮后），表单会提交。

发生了什么事？

Answer 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()

Answer 2

尝试添加：

var form=$('form');

Answer 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();


    });

Answer 4

您可以删除绑定然后提交，无需添加和检查类

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

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

jquery form.submit（）触发处理程序，但不触发实际的提交

4 个答案: