Я собрал форму, используя плагин 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, и был бы рад услышать, что я упустил простые, элегантные и / или очевидные способы сделать это!