Проверка jQuery: как вывести сообщение об ошибке в модальное диалоговое окно jQuery UI

Question

Как я могу изменить сообщение об ошибке проверки jQuery, чтобы при проверке ошибка представлялась в виде маркеров внутри модального диалогового окна jQuery Ui.

Попробовал это, но он не работает должным образом (т.е. модальное диалоговое окно появляется только один раз, но после его закрытия я не могу вернуть модальное диалоговое окно при повторной отправке недействительных данных).

Любые советы будут оценены. Спасибо.

...
        $("#myform").validate({
          debug: true,
          errorPlacement: function(error, element) {
            error.prependTo('#dialog-message');
          },
          errorLabelContainer: $("dialog-message ul"),
          onblur: false,
          onkeyup: false,
          onsubmit: true,
          wrapper: "li",
          showErrors: function() {
            //$("#dialog").dialog("destroy");
            $("#dialog-message").dialog({
              modal: true,
              buttons: {
                Ok: function() {
                  $(this).dialog('close');
                }
              }
            });
            this.defaultShowErrors();
          }
        });
...

      <div id="dialog-message" title="Download complete">
        <p>test</p>
      </div>

Answer 1

Изменить эту строку:

$("#dialog-message").dialog({

К этому:

$("#dialog-message").dialag('destroy').dialog({

Это уничтожит / заново создаст виджет правильно или, альтернативно ...

Запустите это на document.ready:

$(function() {
  $("#dialog-message").dialog({
     modal: true,
     autoOpen: false,
     buttons: { Ok: function() {
         $(this).dialog('close');
       }
     }
  });
});

И вызовите это в своей проверке, чтобы вы снова открывали тот же диалоговый виджет:

      showErrors: function() {
        $("#dialog-message").dialog('open');
        this.defaultShowErrors();
      }

Answer 2

Чтобы использовать только проверку при отправке, добавьте следующие параметры в код js:

jQuery("#myForm").validate({
            ...
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            ....