jQuery Validate：对多个单选按钮有效的规则仅对第一个单选按钮触发

Question

可以运行底部的代码sn-p：附件正确发生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});
    }

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

我在addMethod 的自定义验证定义中也有一个断点（见上文，我有.. Custom function goes here.. returns true/false），并且在提交表单时，我看到该块只执行一次 - - 对于第一个单选按钮。有谁知道为什么？提交表单时，我希望该断点被击中 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>';

因此，this plugin considers this group of radios as a single input for this form。因此，将规则应用于三个按钮中的每一个都是多余的；验证规则和消息同时针对所有三个按钮，而不是单独针对。实际验证将导致按钮分组的单个消息。

If you need each button to have it's own validation, then each one needs a unique 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/

Documentation:

强制：所有输入元素都需要name 属性 需要验证，没有这个插件将无法工作。一种 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});

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

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

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

参考¹：jqueryvalidation.org/reference/#link-validating-multiple-forms-on-one-page

¹ - 尽管文档专门针对 .validate() 方法，但此概念适用于此插件提供的所有方法，包括 .rules()。