如何编写同步jQuery Dialog实现表单提交前Validation？

这个问题的核心是你没有阻止表单的默认提交行为——当点击提交按钮后，浏览器会触发表单的submit事件，你的代码虽然弹出了对话框，但函数执行完毕后，浏览器会继续执行默认的页面提交动作，直接刷新页面，导致对话框还没等你操作就消失了。

下面是修复后的完整代码，我会标注关键修改点：

1. 表单部分（无需改动，仅作参考） #

<form name="annotation" id="annotation" method="post">
  <!-- 你的表单内容 -->
  <input type="submit" class="btn" value="SUBMIT" id="submit">
</form>

2. 脚本部分（关键修改） #

$( "form" ).submit(function( event ) {
  // 第一步：先阻止表单的默认提交行为，这是解决问题的核心！
  event.preventDefault();

  // 你的校验逻辑，假设valid是校验结果
  let valid = false; // 这里替换成你的实际校验判断

  if (!valid) {
    $("#dialog").dialog({
      width: 500,
      buttons: [
        {
          text: "Submit anyway?",
          click: function() {
            // 手动触发表单提交，注意要用原生DOM方法，避免再次触发jQuery的submit事件
            $("#annotation")[0].submit();
            $( this ).dialog( "close" );
          }
        },
        {
          text: "Cancel",
          click: function() {
            $( this ).dialog( "close" );
            // 取消操作，不需要提交，直接关闭对话框即可
          }
        }
      ]
    });
  } else {
    // 校验通过，直接手动提交表单
    $("#annotation")[0].submit();
  }
});

3. 对话框DOM部分（无需改动，仅作参考） #

<div id="dialog" style="display:none">
  <h4>Are you sure you want to submit this?</h4>
</div>

关键修改说明： #

• event.preventDefault()：这行代码会阻止浏览器默认的表单提交动作，让页面不会直接刷新，给你的对话框留出交互时间。
• 原生DOM的submit()方法：当你需要真正提交表单时，用$("#annotation")[0].submit()而不是jQuery的$("#annotation").submit()——因为后者会再次触发你绑定的submit事件，导致循环调用，而原生方法只会执行表单的默认提交，不会触发事件监听。

这样修改后，当校验不通过时，对话框会正常显示，你可以选择"Submit anyway?"手动提交，或者点击"Cancel"关闭对话框返回修改内容，不会再出现一闪而过的问题。

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