Здравствуйте, уважаемые читатели a! В этой статье рассмотрим jQuery плагин для валидации
HTML форм — Validatr
от автора @jaymorrow. Для работы плагина нам понадобится подключенная библиотека jQuery. Для валидации плагин использует . А там где это не возможно воспользуется собственными правилами проверки!
Фактически, благодаря этому плагину Вы можете настроить под себя стандартную HTML5 валидацию: изменить текст предупреждений, визуальное оформление предупреждений их расположение и тд. Подключение
Собственно, для подключение нам необходима jQuery и сам плагин:
Остается только выполнить вызов метода validatr для все форм:
1 | |
Выросла посещаемость на сайте, возросла нагрузка и обычного хостинга не достаточно?! Попробуйте виртуальный сервер windows – отличный вариант для ресурсоемких проектов.
НастройкаТеперь пару слов о настройке плагина. Для начала давайте рассмотрим все возможные атрибуты, которые мы можем использовать для полей формы в качестве настроек плагина. Хочу заострить внимание, данные атрибуты используются для полей формы и задаются в разметке HTML .
Валидатор работает со всеми типами полей формы, логика которых подразумевает проверку. Например при использовании текстовых полей необходимо прописывать собственные правила валидации в виде регулярных выражений указанных в атрибуте pattern .
Небольшой пример использования атрибутов:
1 |
|
Переходим к рассмотрению опций плагина, используемых при его инициализации в jQuery.
| Название | Тип | По-умолчанию | Описание |
| dateFormat | Строка | ‘yyyy-mm-dd’ | Любая комбинация mm , dd , и yyyy с разделителями / , — или . |
| location | Строка | right | Положение сообщения об ошибке, поддерживаемые значения top , left , right , bottom . |
| position | Функция | function ($error, $input) {} | Указанная функция на входе получает 2 параметра, jQuery элемент выведенного сообщения об ошибке (error ) и поле на форме с ошибкой (input ). |
| showall | Булево | false | Показать все сообщения об ошибках сразу при отправке данных формы. |
| template | Строка | Формат сообщения об ошибке. Можно использовать HTML и свое стилевое оформление. Обязательна заглушка {{message}} , вместо нее подставляется непосредственно текст сообщения об ошибке. | |
| theme | Строка | ‘ ‘ | Названия классов CSS, добавляемых к HTML разметке сообщения об ошибке. Если не указано используется предопределенный стиль. Изначально могут использоваться 2 темы: bootstrap и jqueryui . |
| valid | Функция | $.noop | Функция, которая вызывается после успешной проверки формы. Для предотвращения действие по умолчанию (отправки формы) использовать Return false. |
Пример использования данных опций.
Эта очень неприятная тема для любого программиста. Чем больше полей в форме, тем больше и сложнее скрипт для валидации формы jquery . Были времена когда программисты делали валидацию на PHP. Подобная валидация довольно громоздко выглядела. Недостаток такой валидации PHP в том, что постоянно нужно использовать сессии или куки. В этом случае постоянно перегружается страница, что делает лишние запросы к базе данных.
Валидацию на jquery сделать намного проще. Существуют несколько плагинов jquery для проверки полей формы. Я покажу вам очень простой способ. Вы сможете его видоизменить и добавить свои фирменные проверки. Образно говоря, в один массив будут помещены ошибки. Затем этот массив превратится в сплошную строку. Вы увидите на выводе сразу несколько ошибок.
Вставьте следующий код в документ html. Обратите внимание на то, что у вас одна кнопка и 3 поля.
form { margin:10px; border: 1px solid gray; }
input { margin:5px; border: 1px solid gray; }
// validation form jquery
$("input").click(function (){
// собираем данные в один массив
var title = $("input").val().trim();
var text = $("input").val().trim();
var cat = $("input").val().trim();
//обрабатываю данные
var error_arr = ;
if(title.length == 0) error_arr.push("описание");
if(text.length == 0) error_arr.push("текст");
if(cat.length == 0) error_arr.push("категорию");
// проверка на наличие ошибок
if(error_arr.length > 0){
alert("Вы не заполнили следующие поля:\n" + error_arr.join(", "));
// блокировка перехода на другую страницу
return false;
}else{
console.log("Ошибок нет!");
}
});
Давайте рассмотрим сам скрипт для валидации формы. Сначала собираются данные в переменные. Обязательно сделайте очистку данных от пробелов. " " - это тоже символ. Далее происходит проверка данных на наличие символов. Вы можете добавить свои фирменные проверки. Даже можете использовать регулярные выражения. Всё зависит от поставленной задачи. Затем происходит финальная проверка на наличие ошибок. Если есть хотя бы одна ошибка, то алерт выведет ошибку. Обратите внимание на join(). Эта функция собирает все элементы массива и выводит их в виде строки через разделитель. Читайте о массивах на странице массивы в javascript . Я не использую циклы и функцию each(). Так проще)). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSSВ CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле ), :invalid (невалидное ), :required (обязательное ) и:optional (необязательное ). Их можно использовать, чтобы добавлять некоторые - хотя и весьма ограниченные - подсказки пользователям, заполняющим форму.
Используя:valid и:invalid , мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как:invalid , а необязательные - как:valid . Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний:required и:optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами:valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
Используем JavaScriptJavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
Устанавливая атрибуты min , max и step , мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1 , 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь - это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултипВалидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity , включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity -объект будет у поля, когда пользователь введёт в него 1:
Примечание переводчика : Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch , stepMismatch и typeMismatch обратная логика: true - значение не удовлетворяет атрибуту, false - удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity() .
Теперь при попытке отправить форму мы увидим вот это:
Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей.Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
Вот что происходит при клике на submit теперь:
Используем нестандартные проверки валидностиИногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity , мы можем просто-напросто добавить туда ещё несколько проверок.
Валидация в реальном времениХотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать.
Есть множество статей о том, как написать свои правила для плагина jQuery validate, но мало какие из них объясняют внутреннюю работу этого плагина, что мы и обсудим в этой статье.
Это первая часть серии статей «Понимание ненавязчивой валидации Asp.NET MVC»
1. Работа плагина jQuery validate изнутри
Что мы узнаем из этой статьи:
1. Как валидировать форму.
2. Сообщения валидации и как они работают.
3. Добавление собственных правил валидации.
4. Что именно происходит, когда мы вызываем метод валидации.
Есть 2 основных способа, чтобы валидировать форму.1. Использовать имена классов как правила Как это работает
Мы добавляем к полю, которое нужно провалидировать, html атрибут «class», и это подключит валидацию.
Итак, если нам нужно, чтобы текстовое поле было обязательным мы добавляем в элемент input значение атрибута class = «required»
Html
JavaScript
$(document).ready(function() {
$("form").validate();
});
Так вы можете добавить к определенным классам несколько правил.
Плюсы и минусы такого подхода:
Работает только с правилами, которые не принимают аргументов.
Мы используем html атрибут «class» для того, для чего он не предназначен.
Но его легко установить.
Использование функции «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
Информация: Чтобы использовать собственное сообщение для определенного правила requires в составном правиле, нам нужно придумать псевдоним для правила «required», создать новое правило с этим псевдонимом и установить для него сообщение по умолчанию.
JavaScript
$.validator.addMethod("newrequired", $.validator.methods.required, "new name is required");
Или мы можем использовать html атрибут «title», его значение будет сообщением об ошибке для составного правила.
Заметка: Валидация по имени класса работает только для правил валидации, не принимающих никаких аргументов.
2. Добавление правил как JSON объекта к методу validate() По названию, вы должны были догадаться, что этот метод валидации принимает объект json, поэтому мы можем определить поля, которые нам нужно валидировать и правила валидации для них.Html
JavaScript
$("form").validate({
rules: {
userEmail: {
email: true,
required: true
}
}
});
Заметка: Когда мы передаем объект «rules» функции «validate» ключом должно быть значение атрибута «name», а не значение «id». Как можно увидеть в примере: ключ -это «userEmail», значение атрибута «name», а у атрибута «id» другое значение.
Плюсы и минусы этого подхода:
Этот подход дает нам возможность использовать больше правил валидации, которые принимают аргументы, такие как minlength, remote, equalTo и т.д.
Отличный и настраиваемый вручную контроль над всем.
Но пользователь должен делать отдельную функцию «validate» с разными опциями для каждой формы.
JavaScript
$(".input").rules("add", {
required: true,
messages: {
required: true
}
})
JavaScript
$(".input").rules("remove", "min max");
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
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 !/*/.test(value);
},
"Please don"t insert numbers.")
Когда мы вызваем метод 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"".
