如何使用jquery驗證插件驗證select2元素？

Question

我使用select2 3.5.2和jquery驗證1.13.1。我可以使用驗證插件「highlight」方法將錯誤類添加到select2元素，但是當我選擇一個值時，我無法刪除該錯誤類。我該如何解決這個問題？

HTML

<form id="test" class="frm"> 
    <div> 
     <input type="text" name="name" /> 
    </div> 
    <div> 
     <label for="singleselect"></label> 
     <select class="sl" id="singleselect" name="singleselect"> 
      <option></option> 
      <option value="val1">Val-1</option> 
      <option value="val2">Val-2</option> 
     </select> 
    </div> 

    <div> 
     <label for="multipleselect"></label> 
     <select class="sl" id="multipleselect" name="multipleselect" multiple="multiple"> 
      <option></option> 
      <option value="val1">Val-1</option> 
      <option value="val2">Val-2</option> 
     </select> 
    </div> 

    <button class="btn">Submit</button> 
</form> 

JS

$(document).ready(function() { 

    $('.sl').select2({ 
     placeholder:'Select' 
    }) 

    $.validator.setDefaults({ 
     ignore: [] 
    }); 

    $('#test').validate({ 
     errorElement: 'span', 
     errorClass: 'error', 
     rules: { 
      singleselect:'required', 
      multipleselect:'required', 
      name:'required' 
     }, 

    highlight: function (element, errorClass, validClass) { 

     var elem = $(element); 

     elem.addClass(errorClass); 

    }, 
    unhighlight: function (element, errorClass, validClass) { 
     var elem = $(element); 

      if(elem.hasClass('sl')) { 
       elem.siblings('.sl').find('.select2-choice').removeClass(errorClass); 
      } else { 
       elem.removeClass(errorClass); 
      } 
     } 
    }); 

}); 

https://jsfiddle.net/8Lyfa3k2/6/

Answer 1

由於原來select元件通過選擇二插件隱藏的jQuery驗證插件無法再找到任何觸發事件自動當值更改時進行火焰驗證。

您只需創建一個自定義處理程序以編程方式觸發驗證，使用.valid()方法，每當值改變...

DEMO：https://jsfiddle.net/8Lyfa3k2/4/

---

你unhighlight功能顯然被打破。這似乎更好地工作......

unhighlight: function (element, errorClass, validClass) { 
    var elem = $(element); 
    elem.removeClass(errorClass); 
} 

DEMO 2：https://jsfiddle.net/8Lyfa3k2/5/