jQuery验证：多个单选按钮的规则活动仅对第一个单选按钮激发

您可以运行底部的代码段：附件正确地执行了N次，但实际的方法只执行一次。此问题发生在动态生成的表单中。

我在jQuery验证器中有以下自定义规则，适用于表单上的所有单选按钮

    // Destroy and re-initialize Form Validator (dynamically repopulated form)
    var validator = $('#activityQuestionsForm').validate();
    validator.destroy();
    $(form).validate({ .. }); // with configuration

    // Define custom validation method
    $.validator.addMethod('childAnswersVisible', function(value, element) {
         // .. Custom function goes here.. returns true/false
    });

    ...

    // Attach custom validation method to all radiobuttons
    if ($(element).is("#activityQuestionsForm input[type=radio]")) {
        $(element).rules("add", {childAnswersVisible : true});
    }

我有三个单选按钮。创建表单时，我看到

规则（“添加”）

附件正确执行了3次。因此，所有3个单选按钮现在都附带了自定义验证

我在

addMethod

中的自定义验证定义中也有一个断点（见上文，我有

。自定义函数在这里..返回true/false

），在表单提交时，我看到块只执行一次——对于第一个radiobutton。有人知道为什么吗？在提交表单时，我希望该断点被命中3次，每个单选按钮一次，以决定每个单选按钮

//用3个单选按钮构造一个动态表单
var html=''+
“62
”+
“63
”+
“64
”+
'' + 
'';
$（html）.appendTo（'body'）；
$.validator.addMethod（'childAnswersVisible'，函数（值，元素）{
警报（“运行自定义方法”）；
返回true；
});
$（“#活动问题表单”）.validate（）；
$（“#活动问题表单输入[type=radio]”）。每个（函数（索引）{
$（this）.rules（“add”，{childAnswersVisible:true}）；
警报（'Attached custom method for:'+$（this.attr（'id'））；
});

编辑：

// Attach custom validation method to all radiobuttons
if ($(element).is("#activityQuestionsForm input[type=radio]")) {
    $(element).rules("add", {childAnswersVisible : true});
}

所有三个单选按钮都具有相同的
名称
属性

var html = '<form id="activityQuestionsForm">' + 
       '   <input type="radio" name="choices" id="62"> 62 <br> ' +
       '   <input type="radio" name="choices" id="63"> 63 <br> ' +
       '   <input type="radio" name="choices" id="64"> 64 <br> ' +
       '<input type="submit">' + 
       '</form>';

见：

:

强制：所有输入元素都需要
name
属性
需要验证，没有这个插件就无法工作。A.
name
attribute对于表单也必须是唯一的，因为
插件跟踪所有输入元素。然而，每组无线电
或复选框元素将共享相同的
名称，因为
此分组表示单个表单数据段


编辑前OP的原始代码：

// Attach custom validation method to all radiobuttons
if ($(element).is("#activityQuestionsForm input[type=radio]")) {
    $(element).rules("add", {childAnswersVisible : true});
}

当您可以直接将条件附加到jQuery选择器时，没有理由将
.rules（）
放入条件中

$("#activityQuestionsForm input[type=radio]").rules("add", {childAnswersVisible : true});

不管怎样，您的整个问题是因为当选择了多个元素时，这个插件的方法只附加到第一个元素

正确的解决方案是将其包装在
.each（）
中，以便将此规则附加到所有匹配的元素

$("#activityQuestionsForm input[type=radio]").each(function() {
    $(this).rules("add", {childAnswersVisible : true});
});

参考文献1：

1-尽管文档专门介绍了
.validate（）
方法，但此概念适用于此插件提供的所有方法，包括
.rules（）
请构建一个工作演示或至少提供足够的代码。我看不到任何标记，您遗漏了所有函数和配置。有人怎么知道你做错了什么，或者怎么测试这个呢？Sparky，附了一个新的片段。你可以运行它。如果您注意到，该规则正确附加了N次，但实际的验证方法只运行一次。这就是问题所在。您可以滚动3个警报，然后只滚动1个警报。jQuery Validate仅使用
名称
属性进行验证，而不是
id
。由于所有三个单选按钮都具有相同的
名称
，因此这组按钮被视为一个输入。因此，一切都按预期进行，并且您已经对同一输入应用了规则三次。如果它们是唯一的，并且允许您选择任何/所有它们，那么它们将需要不同的
名称。示例：一个输入：
name=“gender”
。。。单选按钮选择：男性，女性，其他。原始答案已更新，供您编辑。这就是我所做的。您可以在我的新代码片段中看到，我正确地附加了N次，我的警报证明了这一点。但是，底层方法仍然只运行一次，另一个警报也显示了这一点。我更新了答案以反映最新的片段。