使用jQuery preventDefault()做表单验证后，修复错误无法重新提交表单的问题排查

你的代码核心问题在于重复绑定了表单提交事件，且第一次绑定的阻止提交逻辑没有被移除，导致后续即使验证通过，表单依然被阻止提交。具体来说：

1. 事件绑定的致命问题 #

当你第一次输入值不一致时，这段代码会给document绑定一个永久的submit事件处理函数：

$(document).on('submit', '#myForm', function(e) {
    e.preventDefault();
});

这个绑定是委托在document上的，只要页面不刷新，它就会一直存在。之后即使你修改输入值让验证通过，你又绑定了另一个submit处理函数，但jQuery会按绑定顺序执行所有相关的事件处理函数——第一个e.preventDefault()依然会先执行，直接阻止了表单提交，后面的逻辑自然无法触发页面重载和提交成功的脚本。

2. 逻辑流程的错误设计 #

• 你把表单验证放在了按钮的click事件里，这会漏掉其他表单提交的触发方式（比如用户按回车键提交），导致验证逻辑有漏洞。
• 针对name="message"的input元素，你用了html()方法设置内容，但input元素的内容应该用val()方法来设置，html()是针对容器元素（比如div、span）的，这属于小的语法错误。

修复后的代码示例 #

我们需要把验证逻辑统一放到表单的submit事件中，并且只绑定一次事件，避免重复绑定的问题：

修改后的jQuery代码 #

// 只绑定一次表单提交事件，不要在按钮点击里动态绑定
$(document).on('submit', '#myForm', function(e) {
    const $form = $(this);
    
    // 防止重复提交的逻辑放在最前面
    if ($form.hasClass('form-submitted')) {
        e.preventDefault();
        return;
    }

    // 获取输入值并验证
    const inputA = $('#inputA').val();
    const inputB = $('#inputB').val();
    
    if (inputA !== inputB) {
        alert("not same!");
        e.preventDefault(); // 验证失败时阻止提交
        return;
    }

    // 验证通过，执行提交前操作
    $form.addClass('form-submitted');
    $("[name='message']").val("Please wait, i am being submitted."); // 改用val()设置input内容
    // 这里不需要阻止默认，让表单正常提交即可
});

对应的HTML（只需要移除按钮的id绑定逻辑，保持结构不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="myForm" method="POST">
    <input type="text" id="inputA" name="inputA" value="1">
    <input type="text" id="inputB" name="inputB" value="2">
    <input type="submit" name="go" value="Submit this" class="btn"> <!-- 可以移除id="go"，因为不需要监听它的click事件了 -->
    <input type="text" name="message">
</form>

为什么原来的写法失效？ #

总结一下关键原因：

1. 动态绑定的submit事件没有被移除，第一次验证失败时绑定的阻止提交逻辑会一直生效。
2. 按钮click事件不是处理表单验证的正确时机，无法覆盖所有提交场景。
3. 针对input元素使用了错误的内容设置方法（html()而非val()）。

这样修改后，既能在验证失败时阻止表单提交，验证通过时正常提交，也能有效防止重复提交，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user32516169