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

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!