Как написать синхронный диалог JQuery для проверки перед отправкой?

Question

Вот что я хотел бы сделать:

У меня есть кнопка SUBMIT. После нажатия кнопки JavaScript выполнит некоторую проверку / проверку моего текста (например, правописание, прописные / строчные буквы). Если проверка / проверка не пройдена, появится диалоговое окно 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), очень быстро отобразится сообщение «Вы уверены, что хотите отправить это?» а затем код отправить в любом случае (слишком быстро, я ничего не могу нажать).

Answer 1

Получил помощь от друга и решил с помощью 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>

Answer 2

Вы должны использовать 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>