Ivan Ivan - 6 months ago 113
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>

<button type="submit" class="btn btn-primary col-md-12 col-lg-12">Go</button>


create: true,
sortField: 'text'

// validate signup form on keyup and submit
errorElement: 'label',
errorClass: 'error',
rules: {
name: {
required: true
person: {
required: true
messages: {
name: "Insert name.",
person: "Insert person.",



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