Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to validate selectize.js comboboxes with the jQuery validation plugin
//How to validate selectize.js comboboxes with the jQuery validation plugin
//selectize.js: http://brianreavis.github.io/selectize.js/ (brianreavis/selectize.js)
//http://jqueryvalidation.org (jzaefferer/jquery-validation)
//configure jquery validation
$("#commentForm").validate({
//the default ignore selector is ':hidden', the following selectors restore the default behaviour when using selectize.js
//:hidden:not([class~=selectized]) | selects all hidden elements, but not the original selects/inputs hidden by selectize
//:hidden > .selectized | to restore the behaviour of the default selector, the original selects/inputs are only validated if their parent is visible
//.selectize-control .selectize-input input | this rule is not really necessary, but ensures that the temporary inputs created by selectize on the fly are never validated
ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
//optional: add rules etc. according to jquery-validation docs
});
if($("#commentForm").valid()) {
alert("this form uses some selectize comboboxes and is valid!");
}
@kro12

This comment has been minimized.

Show comment
Hide comment
@kro12

kro12 Mar 4, 2014

Thanks for that, spent way too long trying to figure out the issue before finding this!

kro12 commented Mar 4, 2014

Thanks for that, spent way too long trying to figure out the issue before finding this!

@janhartmann

This comment has been minimized.

Show comment
Hide comment
@janhartmann

janhartmann Aug 1, 2014

Seems like I can not get this to work? I wish to have my client side validation to trigger if no value is selected in the selectize dropdown.

janhartmann commented Aug 1, 2014

Seems like I can not get this to work? I wish to have my client side validation to trigger if no value is selected in the selectize dropdown.

@yannleretaille

This comment has been minimized.

Show comment
Hide comment
@yannleretaille

yannleretaille Aug 4, 2014

@janhartmann I just tested it with the newest versions of the plugins and it still works for me: http://jsfiddle.net/249Wz/4/

Owner

yannleretaille commented Aug 4, 2014

@janhartmann I just tested it with the newest versions of the plugins and it still works for me: http://jsfiddle.net/249Wz/4/

@janhartmann

This comment has been minimized.

Show comment
Hide comment
@janhartmann

janhartmann Aug 8, 2014

@yannleretaille - hmm, is there a way to make this work across the whole application? I have many forms and wish to have this rule on all forms. Btw, your JSfiddle does not work! :-) Thanks!

janhartmann commented Aug 8, 2014

@yannleretaille - hmm, is there a way to make this work across the whole application? I have many forms and wish to have this rule on all forms. Btw, your JSfiddle does not work! :-) Thanks!

@janhartmann

This comment has been minimized.

Show comment
Hide comment
@janhartmann

janhartmann Aug 8, 2014

Ah, fixed it:

$.validator.setDefaults({
    ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
});

janhartmann commented Aug 8, 2014

Ah, fixed it:

$.validator.setDefaults({
    ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
});
@manusharma1

This comment has been minimized.

Show comment
Hide comment
@manusharma1

manusharma1 Jun 4, 2015

Hi All,

I have one question here, while using jqueryvalidator if the error occurs then in that case the .error class is not applying to the drop down having the class selectized, Can you please suggest something here.

I am using the red border for the error class and it is not displayed around the selectised:

.error {
border: 2px solid #f00;
}

although the error class is appened during the event execution

class="demo-default selectized error"

manusharma1 commented Jun 4, 2015

Hi All,

I have one question here, while using jqueryvalidator if the error occurs then in that case the .error class is not applying to the drop down having the class selectized, Can you please suggest something here.

I am using the red border for the error class and it is not displayed around the selectised:

.error {
border: 2px solid #f00;
}

although the error class is appened during the event execution

class="demo-default selectized error"

@blocka

This comment has been minimized.

Show comment
Hide comment
@blocka

blocka Jul 17, 2015

This is what i did .selectized.error + div.not-full
You need to use the adjacent sibling selector

blocka commented Jul 17, 2015

This is what i did .selectized.error + div.not-full
You need to use the adjacent sibling selector

@z0om

This comment has been minimized.

Show comment
Hide comment
@z0om

z0om Sep 30, 2015

Thank you for the tip 👍

But error class doesn't work. I put this in css file :

.error, .selectized.error + div.not-full {
border: 1px solid #f00 !important;
}

Any idea ?

z0om commented Sep 30, 2015

Thank you for the tip 👍

But error class doesn't work. I put this in css file :

.error, .selectized.error + div.not-full {
border: 1px solid #f00 !important;
}

Any idea ?

@z0om

This comment has been minimized.

Show comment
Hide comment
@z0om

z0om Oct 1, 2015

It works for me like this :

.selectized.error + .selectize-control > .selectize-input

z0om commented Oct 1, 2015

It works for me like this :

.selectized.error + .selectize-control > .selectize-input

@androsland

This comment has been minimized.

Show comment
Hide comment
@androsland

androsland Feb 22, 2016

did anyone manage to add rules in the validator ??

androsland commented Feb 22, 2016

did anyone manage to add rules in the validator ??

@DineshDesai

This comment has been minimized.

Show comment
Hide comment
@DineshDesai

DineshDesai Mar 22, 2016

I need to hide mvc model validation message once dropdownlist item is selected but it doesn't work with selectize

DineshDesai commented Mar 22, 2016

I need to hide mvc model validation message once dropdownlist item is selected but it doesn't work with selectize

@jeffal

This comment has been minimized.

Show comment
Hide comment
@jeffal

jeffal May 20, 2016

I am using the suggested ignore code, but also multiple required selects. It appears jquery-validate only alerts on the first one in the form. Does anyone have any ideas how to solve this? http://jsfiddle.net/249Wz/98/

Update: I figured it out, I was missing name attributes... http://jsfiddle.net/249Wz/99/

jeffal commented May 20, 2016

I am using the suggested ignore code, but also multiple required selects. It appears jquery-validate only alerts on the first one in the form. Does anyone have any ideas how to solve this? http://jsfiddle.net/249Wz/98/

Update: I figured it out, I was missing name attributes... http://jsfiddle.net/249Wz/99/

@adrianorsouza

This comment has been minimized.

Show comment
Hide comment
@adrianorsouza

adrianorsouza Jun 6, 2016

For those also hunting how to add .error class to the selectize element, I'll share how I'm doing this.

within in your validation options:

showErrors: function(errorMap, errorList) {

    // reset all selectize elements errors already highlighted
    $('.selectize-control').removeClass('has-error');

    $.each(errorList, function(key, item){

        var element = $(item.element);

        // check if it's an selectize element, if it does
        // we'll set an appropriate error class to the selectize element

        if ( element.hasClass('.selectize-control') ) {
            element.next('.selectize-control').addClass('has-error');
        }
    })
}

within selectize options I use a function handler onChange to clear the error class when the user did press the submit then fill out the selectize:

onChange: function (value) {
    var control = $(this.$wrapper);

    if (control.hasClass('has-error')) {
        control.removeClass('has-error');
    }
}

adrianorsouza commented Jun 6, 2016

For those also hunting how to add .error class to the selectize element, I'll share how I'm doing this.

within in your validation options:

showErrors: function(errorMap, errorList) {

    // reset all selectize elements errors already highlighted
    $('.selectize-control').removeClass('has-error');

    $.each(errorList, function(key, item){

        var element = $(item.element);

        // check if it's an selectize element, if it does
        // we'll set an appropriate error class to the selectize element

        if ( element.hasClass('.selectize-control') ) {
            element.next('.selectize-control').addClass('has-error');
        }
    })
}

within selectize options I use a function handler onChange to clear the error class when the user did press the submit then fill out the selectize:

onChange: function (value) {
    var control = $(this.$wrapper);

    if (control.hasClass('has-error')) {
        control.removeClass('has-error');
    }
}
@nattigg

This comment has been minimized.

Show comment
Hide comment
@nattigg

nattigg Aug 29, 2016

hello, as they eliminate the error message validation? when changing the selection?
thx

nattigg commented Aug 29, 2016

hello, as they eliminate the error message validation? when changing the selection?
thx

@cristiancalara

This comment has been minimized.

Show comment
Hide comment
@cristiancalara

cristiancalara Nov 14, 2016

The answers provided above aren't working with selectize.js v0.12.3 or greater.

That is happening due to the fact that the required attribute is removed from the select in refreshValidityState function - see selectize/selectize.js@abc8a56

A quick fix for this is to add the selects that are required in the rules array of the validation options object.

Example:

var validator = $("#form").validate({
            ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
            rules: {
                "select-name-here": "required",
                "select-name-here2": "required"
            }
        });

cristiancalara commented Nov 14, 2016

The answers provided above aren't working with selectize.js v0.12.3 or greater.

That is happening due to the fact that the required attribute is removed from the select in refreshValidityState function - see selectize/selectize.js@abc8a56

A quick fix for this is to add the selects that are required in the rules array of the validation options object.

Example:

var validator = $("#form").validate({
            ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
            rules: {
                "select-name-here": "required",
                "select-name-here2": "required"
            }
        });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment