如何使用 jquery 验证和选择验证多选？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14014245/
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
How to validate multi select with jquery validate and Chosen?
提问by Houman
I am able to validate a multi-select with jquery-validate and have created a fiddleas demo. Unselect the selection by holding Ctrl and click on the selection to see the effect.
我能够使用 jquery-validate 验证多选并创建了一个小提琴作为演示。按住 Ctrl 取消选择选择，然后单击选择以查看效果。
<form id="myform">
<select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple">
<option value="1">Hotel 3 Star</option>
<option selected="selected" value="2">Hotel 4 Star</option>
</select>
</form>
$(document).ready(function() {
var validator = $('#myform').validate({
// options
rules: {
"deals-1-sales_item": "required",
},
//ignore: ':hidden:not("#id_deals-1-sales_item")'
});
});
But as soon as I chosenify the multi select it stops working: See fiddle.
但是一旦我选择了多选，它就会停止工作：参见fiddle。
$('#id_deals-1-sales_item').chosen();
While researching I found that someone has tried thiswith jquery multiselectinstead of chosen. It seems hidden elements are ignored in jquery validate. I tried to apply that solution but since Chosen has different methods, I got stuck (multiselect doesn't exist in chosen)
虽然研究，我发现已经有人尝试这种具有jquery multiselect替代选择。似乎在 jquery 验证中忽略了隐藏元素。我尝试应用该解决方案，但由于 Chosen 有不同的方法，我被卡住了（选择中不存在多选）
Is here any jQuery guru that could point me to the right direction? Besides I would rather have the solution based on classes rather than based on field names. Like this:
这里有任何可以为我指明正确方向的 jQuery 大师吗？此外，我宁愿基于类而不是基于字段名称的解决方案。像这样：
This is a solution I came up with half way through. But don't know how to proceed with ???.
这是我中途想出的解决方案。但不知道如何继续???。
$.validator.addMethod("needsSelection", function(value, element) {
return $(element).???.length > 0;
});
var validator = $('#myform').validate({
});
$('#myform').find('select.multi_select_mandatory').each(function(){
$(this).change(function(){
$(this).valid();
});
$(this).rules('add', {
needsSelection: ""
});
});
Solution:
解决方案：
With eicto's solution below, I was able to create a class based instead of field name based solution. This is specially useful when you have dynamic elements that you want to validate instantly without submitting anything to the server.
使用下面的 eicto 解决方案，我能够创建基于类而不是基于字段名称的解决方案。当您想要立即验证动态元素而不向服务器提交任何内容时，这特别有用。
var validator = $('#deal_modal_form').validate({
// options
ignore: ':hidden:not(.chzn-done)'
});
$('#myform').find('select.multi_select_mandatory').each(function(){
$(this).chosen().change(function(){
$(this).valid();
});
$(this).rules('add', {
required: true,
});
});
采纳答案by zb'
This works for me:
这对我有用：
$(document).ready(function() {
? ??var validator = $('#myform').validate({
? ? ? ??// options
? ? ? ??rules: {
? ? ? ? ? ??"deals-1-sales_item": "required",
? ? ? ??},
? ? ? ??ignore: ':hidden:not(.chzn-done)'
? ??});
? ??var checkerrors = function() {
? ? ? ??validator.form();
? ??};
? ??var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors);
});?
the idea is to check form manually on each change.
这个想法是在每次更改时手动检查表单。
回答by Samih A
I have written my solution with the help of both @eicto and @kave solutions as follow:
我在@eicto 和@kave 解决方案的帮助下编写了我的解决方案，如下所示：
$.validator.addMethod("multiSelectRequired", function (value, element) {
return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
$(this).change(function () {
$(this).valid();
});
$(this).rules('add', {
'multiSelectRequired': true
});
});
When initializing the plugin I add `ignoe:[] in order to not to ignor hidden input from validation.
初始化插件时，我添加了 `ignoe:[] 以便不忽略验证中的隐藏输入。
I am using special plugin for my bootstrap project called bootstrap-multiselect to render checkboxes select - https://github.com/davidstutz/bootstrap-multiselcet
我正在使用名为 bootstrap-multiselect 的引导项目的特殊插件来呈现复选框选择 - https://github.com/davidstutz/bootstrap-multiselcet
