1

我有一个表单，其中包含多组从 sql 数据动态创建的复选框和/或单选组。我需要验证每个组中至少有一个复选框（或一个单选按钮）被选中。与此类似的 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”类并立即验证所有组。当我无法知道有多少组或它们的名称时，我如何“找到”所有不同的组并单独验证它们？

4

1 回答 1

3

引用操作：

“当我无法知道有多少组或它们的名称时，我如何‘找到’所有不同的组并单独验证它们？”

“找到”是什么意思？您的代码已经在找到它们。

你现在已经在做的正是当你不知道所有的name' 或你有多少时，你将如何验证某事。req_question 验证方法/规则会自动应用于包含的每个输入，即使class="req_question"您不知道有多少或他们的个人name。

您的 HTML 标记：

name"30004" id"30004-2"

这里有两个问题：

1）您在两者上都缺少等号 , =。应该name="30004" id="30004-2"

2) 通常情况下，name和id值不允许以数字开头。尽管 HTML5 将允许它，IMO，它仍然是不好的编码习惯。请参阅： 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/

于 2013-11-08T19:48:38.440 回答