Я використовую чудовий плагін jQuery Validate для перевірки деяких форм. На одній формі мені потрібно переконатися, що користувач заповнює принаймні одне із груп полів. Я думаю, що у мене досить гарне рішення, і хотів ним поділитися. Пропонуйте будь-які покращення, які ви можете придумати.
Не знайшовши вбудованого способу цього, я шукав і знайшов користувальницький метод перевірки Ребекки Мерфі , який був дуже корисним.
Я покращив це трьома способами:
- Щоб дозволити вам передати селектор для групи полів
- Щоб дозволити вам вказати, скільки цієї групи необхідно заповнити, щоб пройти перевірку
- Показувати всі входи в групі як проходять перевірку, як тільки один з них проходить перевірку. (Дивіться вигук на Ніка Крейвера в кінці.)
Таким чином, ви можете сказати, що "принаймні 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.errorX зображення як його фону, якщо він не має класу .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.