jQuery Validate 不适用于多选下拉菜单

Question

我正在使用带有 Bootstrap 多选插件的 Bootstrap 以及 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>
    ....

演示：http://jsfiddle.net/vg6oLvxo/83/

---

编辑：

OP 对此答案的评论：

这实际上导致我的多选下拉列表被删除，因为当 bootstrap-multiselect 插件生成多选下拉列表时，它会将 display:none 添加到主选择标签

当你使用一个插件来操作 DOM 来隐藏默认的表单元素时，你必须使用 jQuery Validate 的 ignore 选项来确保隐藏的表单元素仍然被验证。 ignore: [] 确保不会忽略任何内容。

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

但从某种意义上说，下拉验证消息显示在下拉列表之前，而其他字段显示在该字段之后，这有点不一致。

jQuery Validate 插件在表单元素之后插入消息。由于 Bootstrap Multiselect 插件隐藏了原始元素并创建了一个新元素，因此消息插入隐藏元素之后，但 出现 在新元素之前。这可以通过在 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);
    }
}

演示 2：http://jsfiddle.net/vg6oLvxo/85/