Question

我正在使用Bootstrap和Bootstrap Multi-select插件以及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元素未触发验证，因为没有验证错误。由于您加载了已选择“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>

否则，在包含空<option>的顶部添加value，您会看到required规则正在运行。

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

DEMO：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); } }

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

jQuery验证不适用于多选下拉列表

1 个答案: