Selectize.js & jquery validation

Question

I am trying to validate a form that uses selectize.js to select and jqueryvalidation.org to validate.

I can not make it work. The script checks input fields, but does not select:

<form id="test" method="post" action="#"> Name: <input name="name" type="text"> <select name="person" id="select-beast" class="demo-default" placeholder="Select"> <option value="">Select...</option> <option value="1">First</option> <option value="2">Second</option>n> </select> <button type="submit" class="btn btn-primary col-md-12 col-lg-12">Go</button> </form> 

JS:

 $('#select-beast').selectize({ create: true, sortField: 'text' }); // validate signup form on keyup and submit $("#test").validate({ errorElement: 'label', errorClass: 'error', rules: { name: { required: true }, person: { required: true } }, messages: { name: "Insert name.", person: "Insert person.", } }); 

http://jsfiddle.net/8nVqS/

Answer 1

The reason is that the jQuery.validation plugin will ignore all hidden elements when checking by default.

And Selectize.js will hide the given jQuery object, so your name field will be checked, but the user field will not.

Solution, please refer to this topic: How to check selectize.js collections with jQuery validation plugin

Answer 2

The answers above do not work with selectize.js v0.12.3 or higher.

This is because the required attribute is removed from the refreshValidityState select function - see https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc

A quick fix is ​​to add the checkboxes required to the array of rules of the object's options.

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

Answer 3

I use

ignore: ': hidden: not ([class ~ = selectized]) ,: hidden> .selectized, .selectize-control.selectize-input input',

and it works for me.