selectize.js＆jQuery驗證

Question

我想驗證一個表格，它使用selectize.js來選擇和jqueryvalidation.org進行驗證。

我不能讓它工作。該腳本驗證輸入字段，而不是選擇：

<form id="test" method="post" action="#"> 
Name: <input name="name" type="text"> 

<select name="person" id="select-beast" class="demo-default" placeholder="Select"> 
    <option value="">Select...</option> 
    <option value="1">First</option> 
    <option value="2">Second</option>n> 
</select> 

    <button type="submit" class="btn btn-primary col-md-12 col-lg-12">Go</button> 
</form> 

JS：

$('#select-beast').selectize({ 
    create: true, 
    sortField: 'text' 
}); 


// validate signup form on keyup and submit 
$("#test").validate({ 
    errorElement: 'label', 
    errorClass: 'error', 
    rules: { 
     name: { 
      required: true 
     }, 
     person: { 
      required: true 
     } 
    }, 
    messages: { 
     name: "Insert name.", 
     person: "Insert person.", 
    } 
}); 

http://jsfiddle.net/8nVqS/

Answer 1

的原因是，當驗證插件jQuery.validation會忽略所有隱藏要素默認。

而Selectize.js會隱藏給定的jQuery對象，所以你的名字字段將運行驗證，但人字段不會。

解決方案，請參考該要旨：How to validate selectize.js comboboxes with the jQuery validation plugin

Answer 2

我使用

忽略：「：隱藏的：不是（[類〜= selectized]）,:隱藏> .selectized，.selectize控制。選擇輸入輸入'，

它適用於我。

Answer 3

上面提供的答案不支持selectize.js v0.12.3或更高版本。

認爲是由於發生的事實，所需要的屬性從選擇中refreshValidityState刪除功能 - 見https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc

要快速解決，這是添加需要在是選擇驗證選項對象的規則數組。

例子：

var validator = $("#form").validate({ 
      ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input', 
      rules: { 
       "select-name-here": "required", 
       "select-name-here2": "required" 
      } 
     });