JQuery остановить проверку при отмене пользовательского интерфейса

Question

У меня есть несколько форм с отдельными валидаторами. Все это работает нормально и проверяет, как ожидается. Однако, если я нажимаю кнопку отмены в диалоговом окне, она все равно проверяет форму и показывает ошибки. Я должен дважды нажать кнопку отмены, чтобы закрыть форму. Если я нажимаю [x], чтобы закрыть диалоговое окно, я кратко вижу сообщение об ошибке, но форма закрывается. Я могу жить с этим.

Это мой код:

var renewValidator = $("#FormRenew").validate({
  rules: {
    NewNo: {
      remote: {
        url: "action.php?checkDup=1"
      }
    }
  }
});

$("#dialog").dialog({
  bgiframe: true,
  autoOpen: false,
  width: 450,
  modal: true,
  buttons: {
    'Renew': function() {
      if (renewValidator.valid()) {
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: queryString,
          success: function(msg) {...
                                 }
                                 });
          $(this).dialog('close');
        }
               },
               Cancel: {
               text: 'Cancel',
               immediate: "true",
               formnovalidate: 'formnovalidate',
               class: 'cancel',
               click: function(e) {
          console.log('Cancel clicked!');
          e.preventDefault();
          $("form").validate().cancelSubmit = true;
          $(this).dialog('close');
        }
      }
    },
    beforeClose: function() {
      renewValidator.resetForm();
      $("#FormRenew").trigger("reset");
    }
  });

Первоначально у меня была простая отмена, как эта Отмена:

function() {
    $(this).dialog('close');
}

Но я добавил различные варианты, как предложено в других сообщениях. Никто не работает для меня.

Answer 1

Кнопки не имеют к этому никакого отношения. Проверка запускается при фокусировке вне поля. Так как модальное окно открывается в фокусе, простое нажатие в любом месте страницы вызывает focusout событие для запуска и, следовательно, запускает проверку.

1. Настройка onfocusout возможность false в .validate() является частью решения. Однако, как объясняется в моих комментариях, вы не можете запускать проверку вообще ни с одной кнопкой, потому что они находятся за пределами form теги (а не type="submit").

2. Измени свой renewValidator.valid() в $("form").valid() поэтому проверка может быть запущена программно, когда Renew нажата.

ВАЖНО: так как ваши кнопки находятся вне <form>Вы также можете удалить весь этот специальный код "кнопки отмены". Кнопка не может отправить или запустить проверку, когда она находится за пределами form контейнер или когда это type="button",

ДЕМО: https://jsfiddle.net/yggg588c/