jQuery Validate not working for Multi-select dropdown

Question

I am using Bootstrap with Bootstrap Multi-select plugin along with jQueryValidation for validating the fields.

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

Any Ideas?

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

Please edit the OP to include the relevant HTML. Please do not rely on the jsFiddle link to stay live. Thanks. — Sparky
– Sparky, Commented Feb 27, 2016 at 16:58

Sparky · Accepted Answer · 2016-03-02 16:02:28Z

3

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

Your select element is not triggering validating because there is no validation error. Since you load the page with "cheese" already selected, the required rule is satisfied; there is no error, so there is no reason to see an error message.

<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>

Otherwise, add an <option> at the top that contains an empty value and you'll see the required rule in action.

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

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

EDIT:

OP's comment on this answer:

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

Whenever you use a plugin that manipulates the DOM to hide the default form elements, you must use the ignore option of jQuery Validate to ensure that the hidden form elements are still validated. ignore: [] ensures that nothing is ignored.

$("#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.

The jQuery Validate plugin is inserting the message after the form element. Since the Bootstrap Multiselect plugin has hidden the original element and created a new one, the message is inserted after the hidden element, but appears before the new element. This can be fixed by using a conditional within the errorPlacement option.

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/

edited Mar 2, 2016 at 16:02

answered Feb 27, 2016 at 16:53

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

jagamot Over a year ago

#Sparky - Thanks for the hint! I already have this default value in the drop down in my actual application. When I posted, I had to tweak the actual example so i don't violate any company policies. Anyways, my jqueryValidation doesn't trigger validation error on the select dropdown when both id and name attributes are set. If I remove the id attribute, validation is being triggered but my dropdown doesn't render as a bootstrap dropdown. And if I have both attributes the jqueryValidation is not being triggered. Any advice?

Sparky Over a year ago

@jagamot, you have to post an example that fully replicates the issue. Otherwise, we're just guessing.

jagamot Over a year ago

@sparky- I was trying to further debug it and here is what is happening. In jqueryValidation.js under the elements function() [v 1.15 line 620] the framework filters out all the hidden elements - <code> return $( this.currentForm) .find( "input, select, textarea, [contenteditable]" ) .not( ":submit, :reset, :image, :disabled" ) .not( this.settings.ignore ) .filter( function() { ... } </code> 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

jagamot Over a year ago

Looks like from version 1.9, hidden fields are ignored which is causing what I was seeing. Setting ignore to [] fixed my issue - stackoverflow.com/questions/8466643/…

jagamot Over a year ago

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.

|

Collectives™ on Stack Overflow

jQuery Validate not working for Multi-select dropdown

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related