Плагин проверки jQuery: группы флажков и сообщения об ошибках - PullRequest
7 голосов
/ 24 февраля 2010

Я собрал форму, используя плагин jQuery Validation, и все входные данные в порядке с рабочими проверками и сообщениями об ошибках - за исключением флажков. У меня есть две проблемы с флажками.

Во-первых, API плагина Validation, похоже, не обрабатывает флажки в сгруппированных контекстах (я использую наборы полей для группировки). Здесь было найдено несколько подходов к решению проблемы, в том числе ссылка на сообщение Ребекки Мерфи для более общего случая использования пользовательского метода и класса. Приспосабливая это к этой ситуации:

jQuery.validator.addMethod('required_group', function(val, el) {
        var fieldParent = $(el).closest('fieldset');
        return fieldParent.find('.required_group:checked').length;
});

jQuery.validator.addClassRules('required_group', {
        'required_group': true
});

jQuery.validator.messages.required_group = 'Please check at least one box.';

Этот тип работает, но выдает сообщения об ошибках на каждом флажке и удаляет их только при нажатии на каждое поле. Это неприемлемая ситуация для пользователя, который может избавиться от них только нажатием ложных срабатываний. В идеале, я думаю, что нужно что-то, чтобы предотвратить или исключить дополнительные сообщения перед их отображением, и использовать errorPlacement для отображения одного сообщения об ошибке в родительском наборе полей, которое затем будет удалено нажатием на любой флажок. Менее в идеале, возможно, они все отобразили бы, но обработчик событий мог бы отключить полный набор избыточных сообщений одним щелчком мыши, что, по-видимому, делает этот подход , предлагаемый tvanfosson. (Другой индивидуальный подход здесь , но я не смог заставить его работать.) Думаю, я должен также отметить, что эта форма требует, чтобы флажки имели разные имена.

Моя вторая проблема заключается в том, что один из наборов полей с флажками в форме также содержит вложенный набор полей флажков под одним из внешних флажков. Таким образом, в дополнение к требованию проверки на один ящик первого уровня, если установлен конкретный флажок, содержащий флажки второго уровня, то должен быть установлен хотя бы один из флажков второго уровня. Не уверен насчет правильного подхода; Я предполагаю, что должно произойти (следуя приведенной выше схеме), что флажок триггера будет использовать toggleClass для добавления / удаления класса 'required_group' для всех флажков в подполе, которые затем (надеюсь) будут вести себя так же, как родительский поле:

$("#triggerCheckbox").click(function () {
  $(this).find(":checkbox").toggleClass("required_group");
});

Любые предложения или идеи приветствуются. Я намного выше своих ограниченных навыков jQuery, и был бы рад услышать, что я упустил простые, элегантные и / или очевидные способы сделать это!

1 Ответ

2 голосов
/ 17 июня 2010

Я уже сталкивался с подобной проблемой раньше, хотя в моем конкретном случае я думаю, что мне было проще, чем у вас - у меня были группы флажков, но ничего в форме не нужно было проверять.

ВотОбщая идея, которая может решить вашу проблему «одна ошибка на флажок»:

//for each fieldset, attach a new rule to the first checkbox
$('fieldset input[type="checkbox"]:first').each(function(i,v){
    $(v).rules('add', {
         required: "fieldset input[type="checkbox"]:unchecked"
    });
});

Чтобы сделать что-то вменяемое с ошибками проверки, реализуйте свою собственную функцию showErrors .Вот где простота моего случая, вероятно, не сильно вам поможет - мне не нужно было беспокоиться о том, были ли ошибки в группе флажков или нет, в моей форме, если были какие-либо ошибки, этобыла бы та же самая проблема - по крайней мере один флажок не был проверен для набора полей.Для вас, я думаю, вам нужно будет покопаться в функции defaultShowErrors плагина Validate (в источнике), чтобы увидеть, что делать с errorMap и errorList.Правило «зависит» - это то, что вы ищете.Поэтому нет необходимости фактически добавлять классы, просто имейте правило для подгруппы, которое будет зависеть от проверяемого родительского флажка (см. Почти идеальный пример в документах по методу правил).

...