jQuery Проверка: правило активно для нескольких радиокнопок, срабатывает только для первой - PullRequest
Новая
       37

jQuery Проверка: правило активно для нескольких радиокнопок, срабатывает только для первой

0 голосов
/ 31 марта 2020

Вы можете запустить фрагмент кода внизу: вложение происходит правильно 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 Радио-кнопки. При создании формы я вижу, что вложение 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>

1 Ответ

1 голос
/ 31 марта 2020

РЕДАКТИРОВАТЬ:

Все три переключателя имеют одинаковый атрибут 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>';

Следовательно, этот плагин считает это группа рад ios как один вход для этой формы . Таким образом, применение правила к каждой из трех кнопок является излишним; Правило проверки и сообщение относятся ко всем трем кнопкам одновременно, а не по отдельности. Фактическая проверка приведет к одному сообщению для группировки кнопок.

Если вам нужно, чтобы каждая кнопка имела свою собственную проверку, то каждая из них нуждается в уникальном 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 /

Документация :

Обязательно: A * Атрибут 1028 * требуется для всех входных элементов, нуждающихся в проверке, и плагин не будет работать без этого. Атрибут 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});
});

Ссылка 1 : jqueryvalidation.org / reference / # link-validating-множественные формы-на -one-page

1 - Несмотря на то, что документация конкретно относится к методу .validate(), эта концепция применима ко всем методам, предоставляемым этим плагином, включая .rules().

...