Selectize.js and jQuery validation

Question

I'm trying to validate a form that uses the Selectize.js to select and jQuery Validation plugin 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 1

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