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

Posted 2023-05-09

【中文标题】用于多个动态创建的复选框或单选组的 jquery 验证器

【英文标题】：jquery validator for multiple dynamically created checkbox or radio groups

【发布时间】：2013-11-19 20:48:44

【问题描述】：

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

【参考方案1】：

引用OP：

“我如何‘找到’所有不同的组并验证它们 个人，当我无法知道有多少，或者什么 他们叫什么名字？”

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

当您不知道所有 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://***.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/

【讨论】：

如果我想要求所有复选框验证，您能帮忙吗？ @Sparky