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

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

Answer 1

按钮与此完全无关。 当您离开该字段时触发验证。由于模式打开时该字段处于焦点状态，因此只需单击页面上的任何位置都会触发 focusout 事件并因此触发验证。

1. 在.validate() 内将onfocusout 选项设置为false 是解决方案的一部分。但是，正如我的 cmets 中所解释的，您根本无法使用任何按钮触发验证，因为它们位于 form 标记之外（而不是 type="submit"）。

2. 将您的renewValidator.valid() 更改为$("form").valid()，以便在单击Renew 时以编程方式触发验证。

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

演示：jsfiddle.net/yggg588c/