Ivan Ivan - 18 days ago 13
Javascript Question

selectize.js & jquery validation

I'm trying to validate a form that uses the selectize.js to select and jqueryvalidation.org for validation.

I can not make it work. The script validates the input fields, but not the 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

The reason is that jQuery.validation plugin will ignore all hidden element when validating by default.

And Selectize.js will hide the given jQuery object, So your name field will run validate but person field will not.

Solution, please reference this gist: How to validate selectize.js comboboxes with the jQuery validation plugin

Comments