Create a gist now

Instantly share code, notes, and snippets.

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 commented Mar 4, 2014

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.

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/

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

blocka commented Jul 17, 2015

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

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 commented Oct 1, 2015

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

jeffal commented May 20, 2016 edited

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

nattigg commented Aug 29, 2016

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"
            }
        });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment