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

演示： 小提琴

_{注意：不確定為什么會發生，只是一種解決方法}