用于多个动态创建的复选框或单选组的 jquery 验证器

Question

我有一个表单，其中包含多组从 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”类并立即验证所有组。当我无法知道有多少组或它们的名称时，如何“找到”所有不同的组并单独验证它们？

Answer 1

引用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" />

演示 3:http://jsfiddle.net/9y2MB/2/