Skip to content

Instantly share code, notes, and snippets.

@yannleretaille
Last active June 13, 2024 21:38
Show Gist options
  • Save yannleretaille/8498983 to your computer and use it in GitHub Desktop.
Save yannleretaille/8498983 to your computer and use it in GitHub Desktop.
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!");
}
@z0om
Copy link

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

z0om commented Oct 1, 2015

It works for me like this :

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

@androsland
Copy link

did anyone manage to add rules in the validator ??

@DineshDesai
Copy link

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

@jeffal
Copy link

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

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

nattigg commented Aug 29, 2016

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

@cristiancalara
Copy link

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

@nccho
Copy link

nccho commented Oct 7, 2019

Thank you for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment