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

你的代码主要有三个核心问题，导致修复错误后表单依然无法提交：

1. 事件绑定重复累加，旧的阻止提交逻辑未被移除 #

每次点击#go按钮，你都会给#myForm绑定一个新的submit事件处理函数——jQuery的.on()方法是追加绑定，不是覆盖。第一次输入不匹配时，你绑定了一个永远阻止表单提交的事件：

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

哪怕之后输入匹配了，你又绑定了另一个submit事件，但之前那个阻止提交的事件依然存在。当你再次点击提交时，两个事件会依次执行，第一个事件直接调用e.preventDefault()，表单自然无法提交。

2. 错误的验证时机：监听按钮点击而非表单提交 #

你把验证逻辑放在了按钮的click事件里，但表单提交的触发方式不止点击按钮（比如用户在输入框按回车键），这种写法会导致验证逻辑覆盖不全。更关键的是，你在点击事件里动态绑定submit事件，完全打乱了表单提交的正常流程。

3. 防重复提交逻辑的时机错误 #

你在点击事件里绑定防重复提交的submit事件，同样会导致重复绑定，而且这个逻辑应该直接放在表单的submit事件处理中，而不是动态追加。

我们直接监听表单的submit事件，在事件内部完成验证、阻止提交、防重复提交的逻辑，避免重复绑定问题：

<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" id="go" value="Submit this" class="btn"> 
    <input type="text" name="message"> 
</form>

<script>
$(document).on('submit', '#myForm', function(e) { 
    // 先判断是否已经提交过，防止重复提交
    if ($(this).hasClass('form-submitted')) {
        e.preventDefault();
        return;
    }

    var inputA = $('#inputA').val(); 
    var inputB = $('#inputB').val(); 

    // 验证不通过时阻止提交
    if (inputA != inputB) { 
        alert("not same!"); 
        e.preventDefault(); 
        return;
    }

    // 验证通过，标记为已提交，显示提示
    $(this).addClass('form-submitted'); 
    $("[name='message']").val("Please wait, i am being submitted."); 
}); 
</script>

PHP代码可以保持不变：

if(isset($_POST['go'])){ 
    //do stuff here 
    echo '<script>alert("Submission successful!")</script>'; 
    echo '<script>window.close()</script>'; 
}

1. 统一监听表单submit事件：不管用户是点击按钮还是按回车提交，都会触发这个事件，验证逻辑全覆盖。
2. 单次绑定，无重复：只绑定一次submit事件，所有逻辑都在这个事件处理函数里，避免了事件累加的问题。
3. 验证逻辑前置：先做输入验证，不通过则直接阻止提交；通过则执行防重复提交逻辑，标记表单为已提交状态，防止重复点击。
4. 提示信息用val()而非html()：你的message是input输入框，应该用.val()设置内容，而不是.html()（后者是用于设置元素内部HTML的）。

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