驗證後無法在select2的輸入中添加類

Question

我正在使用select2.js。

這是我用於表單的html。

<div class="form-main"> 
    <ul style="display: block;" class="form-content"> 
    <li> 
     <h2><span class="orange-text">1.</span> tell us your email</h2> 
    </li> 
    <li class="form-group"> 
     <input type="text" name="email" placeholder="Type it in here" data-required="true" data-toggle="tooltip" data-placement="left" data-email="true" class="form-control"> 
    </li> 
    </ul> 

    <ul style="display: none;" class="form-content"> 
    <li> 
     <h2><span class="orange-text">2.</span>what are you selling?</h2></li> 
    <li class="form-group"> 
     <select data-required="true" data-toggle="tooltip" data-placement="left" name="option" class="js-selection" multiple data-placeholder="Pick the ones that apply to you"> 
     <option value="" selected></option> 
     <option value="1">Shipping/post</option> 
     <option value="2">Customers can collect</option> 
     <option value="3">Other</option> 
     </select> 
    </li> 
    </ul> 
</div> 

一旦驗證class="error"被添加到選擇上述的HTML但不添加到SELECT2的輸入端。

請幫忙!!!!

這是demo

Answer 1

Here是表單驗證與SELECT2在JS驗證一個爲例。

<form id="select2Form" method="post" class="form-horizontal"> 
     <select name="colors" class="form-control select2-select" 
      multiple data-placeholder="Choose 2-4 colors"> 
      <option value="black">Black</option> 
      <option value="blue">Blue</option> 
      <option value="green">Green</option> 
      <option value="orange">Orange</option> 
      <option value="red">Red</option> 
      <option value="yellow">Yellow</option> 
      <option value="white">White</option> 
     </select> 
    </form> 

而且JS驗證：

$('#select2Form') 
    .find('[name="colors"]') 
     .select2() 
     // Revalidate the color when it is changed 
     .change(function(e) { 
      $('#select2Form').formValidation('revalidateField', 'colors'); 
     }) 
     .end() 
    .formValidation({ 
     framework: 'bootstrap', 
     excluded: ':disabled', 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      colors: { 
       validators: { 
        callback: { 
         message: 'Please choose 2-4 color you like most', 
         callback: function(value, validator, $field) { 
          // Get the selected options 
          var options = validator.getFieldElements('colors').val(); 
          return (options != null && options.length >= 2 && options.length <= 4); 
         } 
        } 
       } 
      } 
     } 
    });