jQuery Validate:多个单选按钮的规则活动，只对第一个单选按钮触发

Question

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

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

// 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});
}

我有三个单选按钮。创建表单时，我看到rules("add")附件正确执行了3次。因此，所有3个单选按钮现在都附加了自定义验证。

我在addMethod中的自定义验证定义中也有一个断点(请参阅上面的.. Custom function goes here.. returns true/false(，在Form Submission中，我看到该块只执行一次——对于第一个单选按钮。有人知道为什么吗？在提交表单时，我希望断点被点击3次，每个单选按钮一次，以便为每个单选按钮做出决定。

// Construct a dynamic form with 3 radiobuttons
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>';

$(html).appendTo('body');
$.validator.addMethod('childAnswersVisible', function(value, element) {
alert('Running custom method');
return true;
});
$('#activityQuestionsForm').validate();
$("#activityQuestionsForm input[type=radio]").each(function(index) {
$(this).rules("add", {childAnswersVisible : true});
alert('Attached custom method for: ' + $(this).attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

Answer 1

编辑：

所有三个单选按钮都具有相同的name属性。。。。

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。

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

请参阅：jsfiddle.net/fo1jbu0v/

文件：

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

---

OP编辑前的原始代码：

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

当您可以简单地将.rules()直接附加到jQuery选择器时，没有理由将其放入条件中。

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

无论如何，你的整个问题是因为当选择了多个元素时，这个插件的方法只附加到第一个元素。

正确的解决方案是将其封装在.each()中，以便将该规则附加到所有匹配的元素。

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

参考¹:jqueryvalidation.org/Reference/#链接在一页上验证多个表单

¹-尽管文档中专门介绍了.validate()方法，但这个概念适用于该插件提供的所有方法，包括.rules()。