javascript - 清除 jQuery 对话框在打开时验证

Question

我在代码中遇到类似的行为:https://codepen.io/iw3/pen/BAdIq

html

<input id="open" type="button" value="Open" />
<div id="dialog">
  <form id="form">
    <input type="text" name="field" />
  </form>
</div>

JS

$(function () {
  $('#dialog').dialog({
    autoOpen: false,
    buttons: {
      'Send': function() {
        if ($('#form').valid()) {
          alert('Success');
          $('#dialog').dialog('close');
        }
      }
    }
  });
  $('#open').on('click', function() {
    $('#dialog').dialog('open');
  });
  $('#form').validate({
    rules: {
      field: {
        required: true,
        digits: true,
        maxlength: 9,
        min: 1
      }
    }
  });
});

当用户在表单中输入数据并收到错误，然后关闭表单并重新打开它时，红色的验证消息仍然存在，而它们实际上应该被清除。这是预期行为还是有办法重置验证？

Answer 1

要解决此问题，您只需在关闭对话框时隐藏验证错误 label 元素即可:

$('#dialog').dialog({
  autoOpen: false,
  close: function() {
    $('label.error').hide();
  },
  // other configuration settings...
});

或者，您可以保存对验证器的引用，并在对话框关闭时对其调用resetForm():

let validator = $('#form').validate({
  rules: {
    // your rules...
  }
});

$('#dialog').dialog({
  autoOpen: false,
  close: function() {
    validator.resetForm();
  },
  // other configuration settings...
});