向动态创建的复选框 jQuery 添加验证

Posted 2023-05-09

【中文标题】向动态创建的复选框 jQuery 添加验证

【英文标题】：Add validation to dynamically created checkboxes jQuery

【发布时间】：2017-06-11 01:07:22

【问题描述】：

我正在研究动态表单，即单选，动态添加复选框。不幸的是，我坚持添加验证。

如何为复选框添加 require 属性？

以下代码

<ol type="a">
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
</ol>
<ol type="a">
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
</ol>

输入类型取决于问题是单选还是复选框 可能有任意数量的问题answer1[]、answer2[]、answer3[]

第一种方法如下

$('ol').each(function (i) 
    $(this).find("input:first").prop("required", true);
);

由于输入元素具有相同的名称，radio 类型可以正常工作。但是复选框只需要在第一次输入时被选中。

第二

$('ol').each(function (i) 
    $("[name='answer"+i+"[]']").rules("add", required:true);
);

但它给出了以下错误

无法读取未定义的属性“设置”

如何为复选框添加验证，至少必须选中一个...

【问题讨论】：

您使用什么插件进行验证？

jQuery 验证

【参考方案1】：

好的，试试这个解决方案：

var rules = ;

$('ol [type="checkbox"], ol [type="radio"]').each(function(i,el)
    var name = $(el).attr('name');
    if(rules[name] === undefined)
        rules[name] = 
            required: true
        ;
    
);

$("#myform").validate(
    rules: rules
);

【讨论】：

感谢它的工作，获得元素名称的好方法。

【参考方案2】：

我会直接将动态逻辑添加到“规则”中。 我最近解决了一个表单有两个默认提交按钮的问题。添加规则作为函数处理它。

【参考方案3】：

你可以试试

$('ol').each(function (i) 
    $(this).find("input[type='checkbox']").prop("required", true);
);

尝试检查选中复选框的长度

$('ol').find('input[type="checkbox"]:checked').length

【讨论】：

您的方法使所有复选框都需要被选中。

好的，那么您可以检查每个ol中选中复选框的长度。检查编辑的答案

假设有 50 个问题，我认为检查每个问题的复选框长度不是一个好主意。

你可以循环遍历所有的 ol 将它包裹在 div 下，并在 ol 内部循环输入