Есть множество статей о том, как написать свои правила для плагина jQuery validate, но мало какие из них объясняют внутреннюю работу этого плагина, что мы и обсудим в этой статье.
Это первая часть серии статей «Понимание ненавязчивой валидации Asp.NET MVC»
Что мы узнаем из этой статьи:
1. Как валидировать форму.
2. Сообщения валидации и как они работают.
3. Добавление своих правил валидации.
4. Что именно происходит, когда мы вызываем метод валидации.
Как валидировать форму
Есть 2 основных способа, чтобы валидировать форму.
1. Использовать имена классов как правила
Как это работает
Мы добавляем к полю, которое нужно провалидировать, html атрибут «class», и это подключит валидацию.
Итак, если нам нужно, чтобы текстовое поле было обязательным мы добавляем в элемент input значение атрибута class = «reqiured»
Html
<form action="/" method="post">
<input id="Name" type="text" name="Name" value="" class ="reqiured" />
<input type="submit" value="Submit" />
</form>
JavaScript
$(document).ready(function() {
$('form').validate();
});
Так вы можете добавить к определенным классам несколько правил.
Плюсы и минусы такого подхода:
Работает только с правилами, которые не принимают аргументов.
Мы используем html атрибут «class» для того, для чего он не предназначен.
Но его легко установить.
Использование метода «addClassRules»
Использование функции «addClassRules» дает нам возможность использовать составное правило для одного класса.
JavaScript
$.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
});
Этот код добавляет 2 новых правила для класса «name» и «zip», и, если у нас есть элемент «input», у которого класс «zip», то к нему применяются правила: его значение является обязательным, пользователь может вводить только цифры и длина должна быть точно 5 символов.
Html
<input class="zip" type="text" name="zipCode" />
Информация: Чтобы использовать собственное сообщение для определенного правила requires в составном правиле, нам нужно придумать псевдоним для правила «required», создать новое правило с этим псевдонимом и установить для него сообщение по умолчанию.
JavaScript
$.validator.addMethod("newrequired", $.validator.methods.required, "new name is required");
Или мы можем использовать html атрибут «title», его значение будет сообщением об ошибке для составного правила.
Заметка: Валидация по имени класса работает только для правил валидации, не принимающих никаких аргументов.
2. Добавление правил как JSON объекта к методу validate()
По названию, вы должны были догадаться, что этот метод валидации принимает объект json, поэтому мы можем определить поля, которые нам нужно валидировать и правила валидации для них.
Html
<form>
<input id="something" type="text" name="userEmail" />
<input id="submit" type="submit" value="submit" />
</form>
JavaScript
$('form').validate({
rules: {
userEmail: {
email: true,
required: true
}
}
});
Заметка: Когда мы передаем объект «rules» функции «validate» ключом должно быть значение атрибута «name», а не значение «id». Как можно увидеть в примере: ключ -это «userEmail», значение атрибута «name», а у атрибута «id» другое значение.
Плюсы и минусы этого подхода:
Этот подход дает нам возможность использовать больше правил валидации, которые принимают аргументы, такие как minlength, remote, equalTo и т.д.
Отличный и настраиваемый вручную контроль над всем.
Но пользователь должен делать отдельную функцию «validate» с разными опциями для каждой формы.
Добавление или удаление динамических правил.
Добавление правил
Чтобы добавить правило мы должны использовать метод «rules» для элементов jQuery после того как форма провалидирована и передавать как первый параметр строку «add» и как второй параметр — объект правил, которые мы хотим добавить к этому элементу (также мы можем передавать объект «сообщение» для правил, которые мы добавили).
JavaScript
$('.input').rules('add', {
required: true,
messages: {
required: true
}
})
Удаление правил
Если мы хотим удалить правило или набор правил, мы передаем строку «remove», как первый параметр для метода «rules», а вторым параметром будет строка, которая содержит правила, которые мы хотим удалить, отделенные пробелом.
JavaScript
$('.input').rules('remove', 'min max');
Подход настройки вручную
JavaScript
var validator = $('form').data('validator');
validator.settings.rules.objectName = {
required: true
}
Этот подход очень полезен, если у вас есть созданные правила и объекты сообщений, вы можете расширить правила валидатора своими собственными:
JavaScript
$.extend(validator.settings, { rules: rules, messages: messages });
Сообщения валидации и как они работают
Есть три способа настроить сообщение валидации
1. Передать объект «messages» методу «validate». Объект «messages» состоит из пар ключзначение. Ключ — это значение атрибута «name» элемента. Значение — объект, содержащий каждое правило и его сообщение.
JavaScript
$('form').validate({
rules: {
userEmail: {
email: true,
required: true
}
},
messages: {
userEmail: {
email: "Please enter your email",
required: "*"
}
}
});
2. Определить значение атрибута «title» элемента
Html
<input id="Email" title="you have to enter a value" type="text" name="Email" />
3. Использовать сообщение по умолчанию. Когда определяется правило валидации, есть встроенные сообщения по умолчанию для встроенных правил.
Заметка: Эти три способа переопределяют друг друга, основываясь на приоритетности, самый приоритетный — переданный объект «messages», а наименее приоритетный — сообщение по умолчанию.
Добавление собственных правил валидации
Когда мы хотим добавить больше правил валидации, чем определены по умолчанию, мы используем метод
$.validator.addMethod
Этот метод принимает как параметры следующее:
- имя правила;
- функцию, которая осуществляет валидацию;
- сообщение по умолчанию.
Функция, которая производит валидацию, может быть с двумя или тремя параметрами
JavaScript
function validationMethod (value, element)
// OR
function validationMethod (value, element, params)
Давайте объясню эти параметры.
Значение: значение DOM элемента, который будет валидироваться
Элемент: сам элемент DOM
Параметры: то, что мы передаем как значение. Для этого примера правила валидации — это то, чему должен равняться params.
JavaScript
$('form').validate({
rules: {
firstname: {
compare: {
type: "notequal",
otherprop: "lastname"
}
}
}
});
в этом примере params будет равен {type:«notequal», otherprop: «lastname»}
Пример добавления собственного правила:
JavaScript
$.validator.addMethod("notnumbers", function(value, element) {
return !/[0-9]*/.test(value);
},
"Please don't insert numbers.")
Что именно происходит, когда мы вызываем метод «validate»
Когда мы вызваем метод validate на форме, за кулисами происходит много разных вещей:
Создается объект «validator» со всеми правилами и опциями, присоединенными к форме.
Метод «validate» присоединяет «validator» используя "$.data". Мы можем получить его выбрав форму и вызвав функцию jQuery "$.data" и передать ее «validator». Объект «vaidator» — это все метаданные для валидации, которые дают нам возможность доступа к опциям валидации в любое время жизненного цикла страницы.
Используя этот объект, мы можем изменить во время выполнения опции, которые мы передали методу валидации, такие как добавление или удаление правил, изменение поведения, если поле валидное или невалидное, или даже введение селектора игнорирования.
JavaScript
//getting the validator
var validator = $("selector").data("validator")
Заметка: Когда вы вызываете метод «validate» на форме, которая уже провалидирована, он вернет только объект «validator», используется также $.data, и все предыдущие опции, переданные методом «validate», будут стерты.
JavaScript
var validator = $(".selector").validate(/* rules will be omitted */)
Присоединение событий формы
Что произойдет, когда мы нажмем submit(отправить форму), и в форме будет введено неверное значение для поля, к которому мы присоединили валидацию. Если одно из полей невалидное, то плагин валидации будет присматриваться к нему более пристально, чтобы проверять, валидное оно или нет, по событиям на этом поле.
Сообытия формы, на которые подписывается плагин — это «click», «focusin», «focusout», «keyup», «submit».
Заметка: Вы можете отключить валидацию по определенным событиям, передав их как ключи в методе validate, и false в качестве значений.
JavaScript
$(".selector").validate({
onfocusout: false,
onkeyup: false,
onclick: false,
onsubmit: false
});
Перевод статьи Nadeem Khedr «How the jQuery validate plugin works internally''. nadeemkhedr.wordpress.com/2012/08/12/how-the-jquery-validate-plugin-works-internally/#goCallValidate
Автор: Juty
