jQuery，阻止表单提交，然后继续

Posted 2023-05-09

【中文标题】jQuery，阻止表单提交，然后继续

【英文标题】：jQuery, prevent form from submitting, then continue

【发布时间】：2020-06-28 06:32:48

【问题描述】：

我有一个带有 2 个单选按钮和一个复选框的简单表单。复选框取决于单选按钮。意思是，如果选中了 id="rd1" 的单选按钮，则该复选框也应选中，否则不应提交表单。 如果勾选了 id="rd0" 的单选按钮，就可以提交表单了。

它是这样写的：

<form>
<input type="radio" name="rd" value="0" id="rd0" required="required" />
<input type="radio" name="rd" value="1" id="rd1" required="required" />

<input type="checkbox" name="ckbx" value="sample_value" id="ck" />

<button type="submit" name="send" id="sbmt" >Submit Me!</button>
</form>

所以，现在我已经使用 jQuery 编写并测试了 2 段代码，但每段代码的功能都不同。

第一：

$('#sbmt').click(function(event)
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0)
            alert('You didn't select the checkbox! /facepalm ');
        else
            $('form').submit();
        
    );

这段代码，无论如何都要提交表单！如果我不选择任何单选按钮，它甚至不会触发 required 属性的浏览器警报。

现在，第二段代码：

$('form').submit(function(event)
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0)
            alert('You didn't select the checkbox! /facepalm ');
        else
            $('form').submit();
        
    );

另一方面，当if 条件为真时，这完美地显示了警报。但它不会在没有提交表单时提交。不用说，单选按钮的required 属性在这里完美无缺。

100% 感谢您的帮助。 谢谢

【问题讨论】：

$('form').submit() 像浏览器一样触发提交事件。所以每次你调用 $('form').submit() 都会得到 event.preventDefault()

【参考方案1】：

我认为你对 event.preventDefault() 有误。

$('form').submit(function(event)
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0)
            event.preventDefault(); // prevent only when condition is true, otherwise submit
            alert('You didn't select the checkbox! /facepalm ');
        
);

【讨论】：

工作就像一个魅力！感谢那。但我想知道，else 条件是否应该完美地工作，因为它在preventDefault 之后？还是它进入一个循环？表单提交，默认被阻止，条件发生，else 部分为真，表单再次提交，默认再次被阻止，同样的故事......是这样的吗？