在 jQuery 中取消 $('form').submit() 调用

Question

我在 jQuery 中使用表单提交事件时遇到了麻烦。

加价

<form>
    <input type="text" name="username" />
    <a id="btn_submit">Submit</a>
    <input type="submit" />
</form>

事件侦听器

function valid() { return false; }

$('form').submit(function() {
    if(!valid()) {
        return false;
    }
});

然后，当我点击 <input type="submit" /> 时，它会触发该事件，并且可以取消提交事件。

但是当我在.btn_submit标签上触发表单提交时，returnfalse无法取消提交。

取消失败

$('#btn_submit').click(function() {
    $('form').submit();
    // $('form').trigger('submit');
    // document.forms[0].submit();
});

所以，现在的问题是，如果我必须使用 a.btn_submit 来触发表单提交，我想取消该提交以防万一。

我该如何触发？
我应该如何取消？

请帮忙！

我做了一个fiddlehttp://jsfiddle.net/69wcduv5/2/.

但是在js里好像不能提交fiddle.

我最后的解决方案（有点脏）

我可以在表单内创建一个提交输入，然后点击它。然后删除它。

如果我以这种方式触发提交，我的行为与我预期的完全一样：

$('form').submit(function() {});里面的验证码不用改。
如果表格有类似<input type="text" required />的东西，它就可以做得很好。
我可以在那个主播上打扮得很好。不是他妈的国王 <input type="submit" />

谢谢大家的耐心等待，致以最诚挚的问候。

并希望有一个更好的解决方案。

Answer 1

$("a.btn_submit").click(function(){
  if($('form').valid())
  {
     $('form').submit();
  }
});

Answer 2

$('form').submit(function(event) {
    if(!valid()) {
        event.preventDefault();
    }
});

Answer 3

我明白你要达到什么目的了，所以请忽略我之前写的内容。

formElement.submit() 及其等效的 jQuery 故意不触发 onsumbit 事件。否则有无限递归的潜力。

因此，您不能执行$('form').submit();并希望onsubmit处理程序进行拦截。

您最好的选择可能是您的 "dirty" 想法。即触发对（隐藏）type="submit" 按钮的点击。

Answer 4

使用 link 提交表单似乎很奇怪，但你的问题是你没有取消对锚点的点击操作。

$('.btn_submit').on("click", function(evt) {
    evt.preventDefault();
    $('form').submit();
});

Answer 5

这样调用提交，最符合我的意图：

$.fn.natural_submit = function() {
    if($(this).is('form')) {
        var $form = $(this);
        var $input_submit = $('<input type="submit" />').hide().appendTo($form);
        $input_submit.trigger('click');
        $input_submit.remove();
    }
}

$('#btn_submit').click(function() {
    $('form').natural_submit();
});

在 jQuery 中取消 $('form').submit() 调用

Cancel a $('form').submit() call in jQuery

html

javascript

forms

jquery

加价

事件侦听器

取消失败

我最后的解决方案（有点脏）