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事件，从而触发验证。 / p>

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

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

DEMO：jsfiddle.net/yggg588c/

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

1 个答案: