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

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!