JQuery.Validation 的“unhighlight”是如何调用的？

Question

JQuery.Validation是如何unhighlight调用的？

我有一份正在验证的表格。我捕获了所有应该捕获的内容（ip、电话、电子邮件）

但由于某种原因，我的两个<select>自动转换为框的下拉Select2菜单不太友好。

打开表格。单击保存。所有的气泡都会弹出来说明哪个或什么出了问题。

开始填写它们，当您输入有效值时它们开始消失。

然而，对于Select2盒子来说，这种情况不会发生。

jQuery(function($) {
  var validator = $('#form').validate({
    rules: {
      x: {
        required: true
      }
    },
    messages: {},
    errorPlacement: function(error, element) {},
    highlight: function(element, errorClass, validClass) {
      var v = $(element).val();
      $(element).siblings(".err").addClass('bubble');
      if (v == '') {
        $(element).siblings(".err").html('Required field')
      }
      if (v != '') {
        $(element).siblings(".err").html('Please check format')
      }
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).siblings(".err").removeClass('bubble');
      $(element).siblings(".err").html('')
    }
  });
});

form {
  margin-top: 30px;
}

input.myerror {
  margin-top: 23px;
  border: 1px solid red;
}

.yellow {
  color: yellow;
}

.bubble {
  position: relative;
  width: 140px;
  height: 20px;
  padding: 0px;
  background: #FBFFC7;
  border: #b4b833 solid 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78);
  -moz-box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78);
  box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78);
  margin-left: 70px;
  margin-bottom: -15px;
  text-align: center;
  font-size: 11px;
  color: darkred;
  margin-top: -5px;
  padding-top: 2px;
  padding-left: 10px;
  margin-left: 90px;
  margin-bottom: -17px;
}

.bubble:after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 15px;
  border-style: solid;
  border-width: 14px 9px 0;
  border-color: #FBFFC7 transparent;
  display: block;
  width: 0;
  z-index: 1;
}

.bubble:before {
  content: "";
  position: absolute;
  top: 20px;
  left: 15px;
  border-style: solid;
  border-width: 14px 9px 0;
  border-color: #b4b833 transparent;
  display: block;
  width: 0;
  z-index: 0;
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="//cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.js"></script>


<form id="form" method="post" action="">
  <div>
    <div class="err"></div>
    <label class=''>Test</label>
    <input name="x" class="myerror" />
  </div>
  <input type="submit" class="button" value="Submit" name='button' />
</form>

在 JSFiddle 上查看

Answer 1

尝试有一个更改事件处理程序，您可以在其中手动调用.valid()类似的内容

$('select').select2({}).on("change", function (e) {
    $(this).valid()
})

演示：小提琴

_{注意：不确定为什么会发生，只是一个解决方法}