Selectize.js 和 jQuery 验证答案

【问题标题】：Selectize.js and jQuery validationSelectize.js 和 jQuery 验证
【发布时间】：2014-03-27 19:24:48
【问题描述】：

我正在尝试验证使用Selectize.js 选择和jQuery Validation 插件进行验证的表单。

我不能让它工作。该脚本验证输入字段，但不验证选择：

<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/

【问题讨论】：

标签： javascript jquery validation selectize.js

【解决方案1】：

原因是jQuery.validation插件在默认验证时会忽略所有隐藏元素。

并且 Selectize.js 将隐藏给定的 jQuery 对象，因此您的 name 字段将运行 validate 但 person 字段不会。

解决方案，请参考此要点：How to validate selectize.js comboboxes with the jQuery validation plugin

【讨论】：

感谢您的帮助。
感谢您的帮助，需要更多支持

【解决方案2】：

上面提供的答案不适用于 selectize.js v0.12.3 或更高版本。

发生这种情况是因为在 refreshValidityState 函数中从 select 中删除了所需的属性 - 请参阅 https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc

对此的快速解决方法是在验证选项对象的规则数组中添加必需的选择。

例子：

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

【讨论】：

【解决方案3】：

我正在使用

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

它对我有用。

【讨论】：

那去哪儿了？
$("#test").validate({ ignore:IT_WILL_BE_HERE });