Question

如何调用JQuery.Validation的unhighlight？

我有一张表格可供我验证。我抓住所有应该抓住的东西（ip，电话，电子邮件）

但出于某种原因，我自动转换为<select>框的下拉列表Select2中有两个不太友好。

打开表单。点击保存。并弹出所有气泡来说明哪个或哪个是错误的。

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

然而，Select2框不会发生这种情况。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

View on JSFiddle

Answer 1

尝试使用更改事件处理程序，手动调用.valid()

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

演示：Fiddle

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

如何调用JQuery.Validation的`unhighlight`？

1 个答案: