如何使用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/