javascript selectize.js 和 jquery 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22697276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
selectize.js & jquery validation
提问by Ivan
I'm trying to validate a form that uses the selectize.jsto select and jqueryvalidation.org for validation.
我正在尝试验证使用selectize.js进行选择和 jqueryvalidation.org 进行验证的表单。
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:
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.",
}
});
回答by Reyes Yang
The reason is that jQuery.validation plugin will ignore all hidden element when validating by default.
原因是 jQuery.validation 插件在默认验证时会忽略所有隐藏的元素。
And Selectize.js will hide the given jQuery object, So your name field will run validate but person field will not.
Selectize.js 将隐藏给定的 jQuery 对象，因此您的 name 字段将运行验证但 person 字段不会。
Solution, please reference this gist: How to validate selectize.js comboboxes with the jQuery validation plugin
解决方案，请参考此要点：如何使用 jQuery 验证插件验证 selectize.js 组合框
回答by Cristian Calara
The answers provided above aren't working with selectize.js v0.12.3or greater.
上面提供的答案不适用于 selectize.js v0.12.3或更高版本。
That is happening due to the fact that the required attribute is removed from the select in refreshValidityStatefunction - see https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc
发生这种情况是因为从refreshValidityState函数中的选择中删除了所需的属性- 请参阅https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc
A quick fix for this is to add the selects that are requiredin the rules array of the validation options object.
对此的快速解决方法是在验证选项对象的规则数组中添加所需的选择。
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"
}
});
回答by Bhavik Chauhan
I am using
我在用
ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
忽略: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input',
and it works for me.
它对我有用。
