jQuery 验证不适用于 Multi-select 下拉列表

Question

我正在使用 Bootstrap 和 Bootstrap Multi-select 插件以及 jQueryValidation 来验证字段。

不幸的是，当我将下拉列表呈现为单个 select 时，未触发验证。

有什么想法吗？

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

... when I render the dropdown as a single select, validation is not triggered.

您的 select 元素未触发验证，因为没有验证错误。由于您加载的页面已选择 "cheese"，因此满足 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 对此回答的评论：

This is essentially causing my multiselect dropdown to be removed because when bootstrap-multiselect plugin generates the multi-select dropdown it add display:none to the main select tag

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

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

But it is little inconsistent in the sense the validation message for dropdown is being displayed before the dropdown where as for other fields it is displayed after the field.

jQuery 验证插件正在 表单元素后 插入消息。由于 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/

jQuery 验证不适用于 Multi-select 下拉列表

jQuery Validate not working for Multi-select dropdown

jquery

jquery-validate

twitter-bootstrap

bootstrap-multiselect