Come posso convalidare gli elementi select2 usando il plugin di validazione jquery?

Question

Io uso select2 3.5.2 e validazione jquery 1.13.1. Potrei aggiungere la classe di errore agli elementi select2 usando il metodo "highlight" del plug-in di convalida, ma quando seleziono un valore non posso rimuovere quella classe di errore. Come posso risolvere questo?

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

Dal momento che i select elementi originali sono nascosti dal plugin Select2, il plugin jQuery Convalida non può più trovare qualsiasi innescando automaticamente gli eventi convalida del fuoco quando il valore è cambiato.

è sufficiente per creare un gestore personalizzato per attivare a livello di codice di convalida, utilizzando il metodo .valid(), ogni volta che il valore cambia ...

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

---

tuo unhighlight la funzione era apparentemente rotta. Questo sembra funzionare meglio ...

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

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