Я использую отличный jQuery Validate Plugin для проверки некоторых форм. В одной форме мне нужно убедиться, что пользователь заполняет хотя бы одно из группы полей. Я думаю, что у меня есть довольно хорошее решение, и я хотел бы поделиться им. Пожалуйста, предложите любые улучшения, которые вы можете придумать.
Не найдя встроенного способа сделать это, я искал и нашел Пользовательский метод проверки Ребекки Мерфи , который был очень полезен.
Я улучшил это тремя способами:
- Чтобы позволить вам передать селектор для группы полей
- Чтобы указать, сколько из этой группы должно быть заполнено для прохождения проверки
- Показать все входы в группе как проходящие проверку, как только один из них пройдет
Проверка. (См. Крик Нику Крейверу в конце.)
Таким образом, вы можете сказать "как минимум 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's see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let's 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's .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's 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."));
Ура!
Вопль
Теперь для этого крика - изначально мой код просто слепо скрывал сообщения об ошибках в других соответствующих полях вместо их повторной проверки, что означало, что если возникла другая проблема (например, «разрешены только цифры, и вы ввели» письма '), он стал скрытым, пока пользователь не попытался отправить. Это было потому, что я не знал, как избежать обратной связи, упомянутой в комментариях выше. Я знал, что должен быть способ, поэтому Я задал вопрос , и Ник Крейвер просветил меня. Спасибо, Ник!
Вопрос решен
Первоначально это был вопрос «позвольте мне поделиться этим и посмотреть, может ли кто-нибудь предложить улучшения». Хотя я все еще приветствую отзывы, я думаю, что на данный момент они довольно полные. (Это может быть короче, но я хочу, чтобы оно было легко читаемым и не обязательно кратким.) Так что просто наслаждайтесь!
Обновление - теперь часть проверки jQuery
Это было официально добавлено в jQuery Validation 4/3/2012.