Question

我有一个表单，其中包含多组复选框和/或无线电组，这些组是从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'类并立即验证所有组。当我无法知道有多少组或者它们被命名为什么时，我如何“找到”所有不同的组并单独验证它们？

Answer 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://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/

HOWEVER ，您不需要自定义方法来执行此操作。默认情况下，如果将required规则应用于这些相同的元素，您将获得完全相同的结果。我使用.rules('add')方法将required规则添加到req_question类的所有字段中。

$('.req_question').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: 'Please check at least one box.'
        }
    });
});

DEMO 2：http://jsfiddle.net/9y2MB/1/

但是等等！这甚至比这更简单。只需在所有这些元素上使用class="required"代替class="req_question" ......

<input type="checkbox" name="n30001" id="n30001-1" class="required" value="1" />

DEMO 3：http://jsfiddle.net/9y2MB/2/

jquery验证器，用于多个动态创建的复选框或无线电组

1 个答案: