jQuery 在取消 ui 对话框时停止验证

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');
}

但我添加了其他帖子中建议的各种选项。 None 适合我。

Answer 1

按钮与此完全无关。 当您将焦点移出字段时会触发验证。由于模式打开时焦点位于字段中，只需单击页面上的任意位置即可触发 focusout 事件并因此触发验证。

在 .validate() 中将 onfocusout 选项设置为 false 是解决方案的一部分。但是，正如我在评论中所解释的那样，您根本无法使用任何按钮触发验证，因为它们位于 form 标签之外（而不是 type="submit"）。
将您的 renewValidator.valid() 更改为 $("form").valid()，以便在单击 Renew 时以编程方式触发验证。

重要提示：由于您的按钮在 <form> 之外，您还可以删除所有特殊的 "button canceling" 代码。当按钮 在 form 容器外部或 type="button".[=23= 时，按钮无法提交或触发验证]

演示：jsfiddle.net/yggg588c/

jQuery 在取消 ui 对话框时停止验证

jQuery Stop validation on cancel ui dialog

jquery

jquery-validate

jquery-ui-dialog