Я использую отличный jQuery Validate Plugin для проверки некоторых форм. В одной форме мне нужно убедиться, что пользователь заполняет хотя бы одну из группы полей. Я думаю, что у меня неплохое решение, и я хотел бы поделиться им. Просьба предложить любые улучшения, о которых вы можете подумать.
Не найдя встроенного способа сделать это, я искал и нашел метод выборочной проверки Ребекки Мерфи, что было очень полезно.
Я улучшил это тремя способами:
- Чтобы передать вам селектор для группы полей
- Чтобы указать, сколько из этой группы должно быть заполнено для проверки, чтобы пройти
- Чтобы показать все входы в группе как прохождение проверки, как только один из них пройдет Проверка. (См. Крик-к Nick Craver в конце.)
Итак, вы можете сказать "по крайней мере X входов, которые соответствуют селектору Y, должны быть заполнены."
Конечный результат: с разметкой:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">
... представляет собой группу правил, подобных этому:
// Both these inputs input will validate if
// at least 1 input with class 'productinfo' is filled
partnumber: {
require_from_group: [1,".productinfo"]
}
description: {
require_from_group: [1,".productinfo"]
}
Пункт №3 предполагает, что вы добавляете класс .checked к сообщениям об ошибках после успешной проверки. Вы можете сделать это следующим образом: как показано здесь.
success: function(label) {
label.html(" ").addClass("checked");
}
Как и в приведенной выше демонстрационной версии, я использую CSS, чтобы каждый span.error отображал изображение X в качестве фона, если только он не имеет класс .checked, и в этом случае он получает изображение галочки.
Здесь мой код:
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
//Look for our selector within the parent form
var validOrNot = $(selector, element.form).filter(function() {
// Each field is kept if it has a value
return $(this).val();
// Set to true if there are enough, else to false
}).length >= numberRequired;
// The elegent part - this element needs to check the others that match the
// selector, but we don't want to set off a feedback loop where each element
// has to check each other element. It would be like:
// Element 1: "I might be valid if you're valid. Are you?"
// Element 2: "Let see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let see. I might be valid if YOU'RE valid. Are you?"
// ...etc, until we get a "too much recursion" error.
//
// So instead we
// 1) Flag all matching elements as 'currently being validated'
// using jQuery .data()
// 2) Re-run validation on each of them. Since the others are now
// flagged as being in the process, they will skip this section,
// and therefore won't turn around and validate everything else
// 3) Once that done, we remove the 'currently being validated' flag
// from all the elements
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
// .valid() means "validate using all applicable rules" (which
// includes this one)
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
Ура!
Кричать
Теперь для этого крика - изначально мой код просто слепо скрывал сообщения об ошибках в других совпадающих полях вместо повторной проверки их, что означало, что если возникла другая проблема (например, "только номера разрешены и вы ввели буквы '), он был скрыт, пока пользователь не попытался отправить. Это произошло потому, что я не знал, как избежать цикла обратной связи, упомянутого в комментариях выше. Я знал, что должен быть способ, поэтому я задал вопрос, и Nick Craver просветил меня. Спасибо, Ник!
Вопрос Решенный
Первоначально это было "позвольте мне рассказать об этом и посмотреть, может ли кто-нибудь предложить предложения". Хотя я по-прежнему приветствую обратную связь, я думаю, что это довольно полно. (Это может быть короче, но я хочу, чтобы это было легко читать и не обязательно кратким.) Так что просто наслаждайтесь!
Обновление - теперь часть проверки jQuery
Это было официально добавлено в jQuery Validation 4/3/2012.