How to validate selectize.js comboboxes with the jQuery validation plugin

validate-selectize-fields.js

//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!"); 
}

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

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 I just tested it with the newest versions of the plugins and it still works for me: http://jsfiddle.net/249Wz/4/

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

Ah, fixed it:

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

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"

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

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 ?

It works for me like this :

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

did anyone manage to add rules in the validator ??

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

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/

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');
    }
}

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

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"
            }
        });

Thank you for this!