如何在提交前编写同步 jQuery 对话框进行验证？

Question

这是我想做的事情：

我有一个 SUBMIT 按钮。单击按钮后，javascript 会对我的文本做一些 check/validation（例如拼写，uppercase/lowercase）。如果 check/validation 没有通过，那么会弹出 jQuery 对话框并通过两个选项进行确认：（1）仍然提交（2）取消（返回页面并更正一些内容）。

但是，我发现代码执行了所有脚本（并跳过了中间的对话框代码），所以对话框的确认代码最后执行并提交。有没有办法让对话框的代码根据行号执行？非常感谢！

P.S。我不想使用 confirm 因为我需要更大的字体。

这是<form>：

<form name="annotation" id="annotation" method="post">
  ...
  <input type="submit" class="btn" value="SUBMIT" id="submit">
</form>

这是脚本：

<script>
  $( "form" ).submit(function( event ) {
      // Perform some checking/validation
      // ...

      if (!valid) {
        $("#dialog").dialog({width:500,
            buttons: [
            {
              text: "Submit anyway?",
              click: function() {
                // Perform submission
                $( this ).dialog( "close" );
            }
            },
            {
              text: "Cancel",
              click: function() {
                // Perform cancelation
                $( this ).dialog( "close" );
              }
            }]
        });
      }
      else
      {
        // Perform submission
      }
  });
</script>

和 <div>:

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

比如我点击按钮后（在valid == false的情况下），非常闪现"Are you sure you want to submit this?"的消息，然后代码提交（太快了，我无法点击任何东西）。

Answer 1

您应该使用 preventDefault()，如下所示

<script>
  $("form").submit(function(event) {

    var form = event.target;

    if (!valid) {
      event.preventDefault() //Here you can prevent submission
      $("#dialog").dialog({
        width: 500,
        buttons: [{
            text: "Submit anyway?",
            click: function() {
              // Perform submission
              form.submit();
              $(this).dialog("close");
            }
          },
          {
            text: "Cancel",
            click: function() {
              // Perform cancelation
              $(this).dialog("close");
            }
          }
        ]
      });
    } else {
      // Perform submission
    }
  });
</script>

Answer 2

得到朋友的帮助，用document.getElementById('').submit()解决了。首先，将 <input> 更改为 <button>:

<form name="annotation" id="annotation" method="post">
  ...
  <button type="button" class="btn" onclick="submit_post()" value="SUBMIT" id="submitBtn">SUBMIT</button>
</form>

然后更改脚本：

<script>
  function submit_post()
  {
      // Perform some checking/validation
      // ...

      if (!valid)
      { 
        $("#dialog").dialog({
            width:500,
            buttons: [
              {
                text: "Submit anyway",
                click: function() {
                  document.getElementById('annotation').submit();
                  $( this ).dialog( "close" );
                }
              },
              {
                text: "Cancel",
                click: function() {
                  $( this ).dialog( "close" );
                }
              }
            ]
        });
      }
      else
      {
        document.getElementById('annotation').submit();
      }
  }
</script>

如何在提交前编写同步 jQuery 对话框进行验证？

How to write a synchronous jQuery dialog for validation before submit?

javascript

jquery

dialog

form-submit