Jquery bootstrap select2插件問題與驗證插件

Question

在我的引導項目中，我試圖使用插件select2，但我意識到，如果您使用此插件 不再能夠驗證我的表單中的選擇字段與驗證插件。 我會避免使用商業插件引導驗證..

<div class="container"> 
<div class="row"> 
    <form id="test_form" action="?"> 
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="name">Foo</label> 
       <select class="form-control" id="foo" name="foo"> 
        <option value=""></option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="form-group"> 
       <label for="name">Bar</label> 
       <select class="form-control" id="bar" name="bar"> 
        <option value=""></option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-md-1"> 
      <button type="submit" class="btn btn-primary">VALIDATE</button> 
     </div> 
    </form> 
</div> 
</div> 

JS

/* select 2 plugin */ 
$('select#foo').select2(); 

/* Validation */ 
$("#test_form").validate({ 
    rules: 
    { 
     foo: { required: true }, 
     bar: { required: true } 
    }, 
    errorPlacement: function (error, element) { 
     $(element).addClass('err'); 
    }, 
    success: function (label, element) { 
     $(element).removeClass('err'); 
    }, 
    submitHandler: function(form) { 
     alert("validation ok"); 
    } 
}); 

在您看來，我怎麼能解決這個問題？謝謝

MY DEMO

Answer 1

好的。這裏是爲我工作

/* select 2 plugin */ 
$('select#foo').select2(); 

/* Validation */ 
    $("#test_form").validate({ 
     ignore: 'input[type=hidden]', 
     rules: 
     { 
      foo: { required: true }, 
      bar: { required: true } 
     }, 
     errorPlacement: function (error, element) { 
      $(element).parent().addClass('has-error'); 
     }, 
     success: function (label, element) { 
      $(element).parent().removeClass('has-error'); 
     }, 
     submitHandler: function(form) { 
      alert("validation ok"); 
     } 
    }); 

我添加了一個「忽略：‘輸入[類型=隱藏]’，」選項，因爲選擇二腳本添加一個隱藏的選項將原始輸入和Jquery的驗證似乎忽略它。然後我將錯誤類從元素上的「err」更改爲父元素（具有form-group類的div）上的「has-error」