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

Question

该如何unhighlight JQuery.Validation的叫什么？

我有一个正在验证的表格。 我正在捕获所有应该捕获的内容（IP，电话，电子邮件）

但是由于某种原因，我的下拉菜单中的2个<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()
})

演示： 小提琴

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