我有一个表单,其中包含多组从 sql 数据动态创建的复选框和/或单选组。我需要验证每组中至少选中了 1 个复选框(或单选按钮)。 HTML 输出类似于:
<td>
<input type="checkbox" name"30001" id"30001-1" class="req_question" value="1">
<input type="checkbox" name"30001" id"30001-2" class="req_question" value="2">
</td>
<td>
<input type="checkbox" name"30002" id"30002-1" class="req_question" value="1">
<input type="checkbox" name"30002" id"30002-2" class="req_question" value="2">
</td>
<td>
<input type="radio" name"30003" id"30003-1" class="req_question" value="1">
<input type="radio" name"30003" id"30003-2" class="req_question" value="2">
</td>
<td>
<input type="radio" name"30004" id"30004-1" class="req_question" value="1">
<input type="radio" name"30004" id"30004-2" class="req_question" value="2">
</td>
我有以下 addMethod,但这仅检查 1 个按钮,然后验证所有组:
$.validator.addMethod('req_question', function(value) {
return $('.req_question:checked').size() > 0;
}, 'Please check at least one box.');
我相信这是获取“req_question”类并立即验证所有组。 当我无法知道有多少组或它们的名称时,如何“找到”所有不同的组并单独验证它们?
最佳答案
引用OP:
"How can I 'find' all of the disparate groups and validate them individually, when I have no way to know how many there are, or what they are named?"
“查找”是什么意思?您的代码已经找到它们。
您现在所做的正是在您不知道所有名称
或您有多少个名称时验证某些内容的方式。 req_question
验证方法/规则会自动应用于包含 class="req_question"
的每个输入,即使您不知道有多少个或它们各自的name
的。
您的 HTML 标记:
name"30004" id"30004-2"
这里有两个问题:
1) 两者都缺少等号 =
。应为 name="30004"id="30004-2"
2) 通常,name
和 id
值不允许以数字开头。尽管 HTML5 允许这样做,但在我看来,这仍然是不好的编码实践。请参阅:https://stackoverflow.com/a/79022/594235
您的自定义方法:
$.validator.addMethod('req_question', function(value) {
return $('.req_question:checked').size() > 0;
}, 'Please check at least one box.');
您的函数已损坏,因为 $('.req_question:checked')
同时针对所有这些已检查元素。 addMethod
中的函数采用两个参数:value
和 element
。 value
是正在验证的元素的当前值。 element
是当前正在验证的元素。您可以使用这些关键字,因为您只需定位正在验证的元素。
$.validator.addMethod('req_question', function (value, element) {
return value > 0;
}, 'Please check at least one box.');
工作演示:http://jsfiddle.net/9y2MB/
<小时/>但是,您不需要自定义方法来执行此操作。默认情况下,如果您将 required
规则应用于这些相同的元素,您将获得完全相同的结果。我使用 .rules('add')
方法将 required
规则添加到 req_question
类的所有字段。
$('.req_question').each(function () {
$(this).rules('add', {
required: true,
messages: {
required: 'Please check at least one box.'
}
});
});
演示 2:http://jsfiddle.net/9y2MB/1/
<小时/>但是等等!它甚至比那简单得多。只需在所有这些元素上使用 class="required"
而不是 class="req_question"
...
<input type="checkbox" name="n30001" id="n30001-1" class="required" value="1" />
关于用于多个动态创建的复选框或单选组的 jquery 验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19848964/