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!");
}
@kro12
Copy link

kro12 commented Mar 4, 2014

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

@janhartmann
Copy link

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.

@yannleretaille
Copy link
Author

@janhartmann I just tested it with the newest versions of the plugins and it still works for me: http://jsfiddle.net/249Wz/4/

@janhartmann
Copy link

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

@janhartmann
Copy link

Ah, fixed it:

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

@manusharma1
Copy link

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

blocka commented Jul 17, 2015

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

@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