jQuery驗證工作不適合多選下拉

Question

我使用的引導與引導多選插件與jQueryValidation一起用於驗證字段。

不幸的是，當我呈現下拉作爲一個單一的選擇，確認不會被觸發。

任何想法？

的Javascript

 $("#signupForm").validate({ 
      rules: { 
       firstname: "required", 
       lastname: "required", 
     food: "required", 
       username: { 
        required: true, 
        minlength: 2 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 
       confirm_password: { 
        required: true, 
        minlength: 5, 
        equalTo: "#password" 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       agree: "required" 
      }, 
      messages: { 
       firstname: "Please enter your firstname", 
       lastname: "Please enter your lastname", 
     food: "Fruit is required to enter", 
       username: { 
        required: "Please enter a username", 
        minlength: "Your username must consist of at least 2 characters" 
       }, 
       password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
       }, 
       confirm_password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long", 
        equalTo: "Please enter the same password as above" 
       }, 
       email: "Please enter a valid email address", 
       agree: "Please accept our policy" 
      }, 
      errorElement: "em", 
      errorPlacement: function (error, element) { 
       // Add the `help-block` class to the error element 
       error.addClass("help-block"); 

       if (element.prop("type") === "checkbox") { 
        error.insertAfter(element.parent("label")); 
       } else { 
        error.insertAfter(element); 
       } 
      }, 
      highlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success"); 
      }, 
      unhighlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error"); 
      } 
     }); 
$('.multiselect').multiselect(); 

JSFIDDLE

Answer 1

...當我呈現下拉作爲一個單一的選擇，確認不會被觸發。

您的select元素沒有觸發驗證，因爲沒有驗證錯誤。由於您使用已選擇的「奶酪」加載頁面，因此滿足required規則;沒有錯誤，所以沒有理由看到錯誤消息。

<select name="food" class="multiselect"> 
    <option value="cheese"> Cheese </option> 
    <option value="tomatoes"> Tomatoes </option> 
    <option value="mozarella"> Mozzarella </option> 
    <option value="mushrooms"> Mushrooms </option> 
    <option value="pepperoni"> Pepperoni </option> 
    <option value="onions"> Onions </option> 
</select> 

否則，在包含空value頂部添加一個<option>，你會看到在行動required規則。

<select name="food" class="multiselect"> 
    <option value="">please select...</option> 
    <option value="cheese"> Cheese </option> 
    .... 

DEMO：http://jsfiddle.net/vg6oLvxo/83/

---

編輯：這個答案

OP的評論：

這實質上導致我多選下拉是因爲刪除當b ootstrap，多選插件生成的多選下拉它添加display:none到主選擇標籤

每當你使用操縱DOM隱藏默認的表單元素一個插件，你必須使用到ignore選項jQuery驗證的確保隱藏的表單元素仍然有效。 ignore: []確保沒有任何內容被忽略。

$("#signupForm").validate({ 
    ignore: [], // ignore nothing, validate everything 
    rules: { .... 

但它是在爲其他領域是後場顯示下拉之前被顯示下拉列表中驗證消息的感覺有點不一致。

jQuery Validate插件在表單元素後面插入消息。由於自舉複選插件已經隱藏在原始元件和創建一個新的，該消息被隱藏的元素之後插入，但出現新元素之前。這可以通過在errorPlacement選項中使用條件來修復。

errorPlacement: function(error, element) { 
    if (element.hasClass('multiselect')) { 
     // custom placement for hidden select 
     error.insertAfter(element.next('.btn-group')) 
    } else { 
     // message placement for everything else 
     error.insertAfter(element); 
    } 
} 

DEMO 2：http://jsfiddle.net/vg6oLvxo/85/