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/