Защита от дурака.  Валидация полей произвольных форм и контейнеров на jQuery

Думаю многие знают, что такое форма: это совокупность элементов, которые могут представлять собой текстовое поле (text), текстовое пространство (textarea), чек боксы (checkbox), радио кнопки/переключатели (radio), выпадающие списки (option), кнопки (button, submit). Эти поля посылают данные – имя/значение. Данные соответственно обрабатываются на сервере и результат возвращается пользователю. Валидация – это проверка данных заполненных полей на соответствие какому-то шаблону.

Проверка может осуществляться с помощью html5, javascript/jQuery на клиенте и также на сервере. Любое поле должно иметь атрибут ‘name’ Также input поля могут иметь атрибут ‘value’ . Если значение value заполнено, то оно будет отображаться на страничке по умолчанию. Input поля могут обрамляться тегами . Применение данного тега – является хорошим стилем программирования. Когда он используется то у input поля появляется заголовок при клике на который становится активным данный input или переключатель, а также можно назначать горячие клавиши. Есть два варианта использования: первый вариант связка for ссылающаяся на id нужного поля и второй вариант просто обрамить поле input: Имя либо Имя: Текстовое поле это или У полей с типом password вводимые символы отображаются звездочками для безопасности. Чтобы загрузить файл, используется поле Input с type=”file” Поле с галочкой – Input type=”checkbox”. Если поставить галочку, то такое поле получит атрибут “checked” Радио кнопка – Input type=”radio”, в отличии от чекбокса можно выбрать только одно значение. Для передачи значений, которые не нужно видеть юзеру, используются скрытые поля- Input type=”hidden”. Кнопка отправки формы – Input type=”submit”. Значение value будет отображаться на кнопке, например value=”click me!”. Просто кнопка – Input type=”button” или теги click me. Поле для большого куска текста – Здесь текст Поле выбора значения из выпадающего списка: Выбрать… Выбор 1 Выбор 2 Задать выбранное поле по умолчанию поможет атрибут selected. Если задать атрибут multiple то можно выбрать несколько значений: …

HTML 5 Input

Input type=”date” выводит календарь для выбора даты. Input type=”color” выводит палитру для выбора цвета. Input type=”range” выведет слайдер для выбора значения от 0 до 100%. Также появились новые атрибуты: autocomplete, placeholder, required, pattern и так далее… Контейнер для всех полей, это тег form. Его возможные параметры: Action – куда послать данные, Enctype – как браузеру воспринимать передаваемые данные, Method – метод передачи данных GET (через url) или POST (фоновая передача).

HTML 5 Валидация

HTML5 Валидация будет осуществляться самим браузером основываясь на типе поля. Например глянем на форму и увидим типы e-mail , url , number , datetime :

Email

Website

Age

Date & Time

send

Из плюсов это конечно автоматическая проверка, из минусов можно отметить то, что старые браузеры не поддерживают HTML5.

Если добавить атрибут required : то данное поле должно быть обязательно заполнено, иначе появится предупреждение.

Если добавить атрибут placeholder то его значение появится в поле в роли подсказки, например:

Проверить поддержку какого-то параметра браузером, можно на сайте caniuse.com

Ограничить количество вводимых символов можно свойством maxlength , например:

Параметры min/max ограничивают цифровые значения: . Также это ограничение можно присваивать датам:

Параметр multiple позволяет выбирать несколько файлов с помощью Input=”file” или делает возможным ввод нескольких емэйлов в поле Input=”email”.

Разрешить загрузку только определенных типов файлов можно указав mime-type, например только для PNG:

Или только для любых изображений:

Для mp3 и видео:

Можно также использовать регулярные выражения. Например паттерны:

Поле для ввода только слова Привет: . Если надо сделать возможность ввода Привет и привет, то меняем паттерн так: pattern=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: + Плюс означает один или больше. Строчные и прописные +

ASP ,

JavaScript

Есть множество статей о том, как написать свои правила для плагина 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»
Использование функции «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» с разными опциями для каждой формы.

Добавление или удаление динамических правил.Добавление правил Чтобы добавить правило мы должны использовать метод «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

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»

Когда мы вызваем метод 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"".

Эта очень неприятная тема для любого программиста. Чем больше полей в форме, тем больше и сложнее скрипт для валидации формы 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(). Так проще)). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

Как видите, пока все поля не будут заполнены, скрипт не даст отправить форму, к тому же в поле для e-mail должен быть введен корректный адрес. Для начала я покажу как сделать простую проверку на заполненность полей без проверки e-mail. Вдруг в вашей форме нет этого поля и вам нужно проверить просто текстовое поле, чтобы оно не было пустое и на почту не приходили пустые уведомления.

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

По коду видно, что наша форма состоит из трех полей - имя, почта и тестовое поле. Есть еще несколько важных моментов, которые понадобятся в любом случаи для правильной работы скрипта. Давайте разберем по-порядку.

• id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
• - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
• onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
• Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}

Данный стили задают параметры для самой формы, полей, кнопки. Расписывать все строчки, каждая для чего - не буду, для этого есть учебники по CSS. Распишу лишь два самых основных.

• #messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
• .notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

Теперь, когда у нас есть готовая форма или вы свою форму настроили соответственно моим указаниям, добавили ей айди, мои или свои, нужный блок и событие кнопки, можем приступить к подключению скрипта.

Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .

После библиотеки, не перед ней, а именно после нужно уже подключать, наш долгожданный скрипт валидации формы. как и писал ранее, первым вариантом будет сначала скрипт проверки поле на заполнение, без проверки правильности введенной почты. Сам скрипт имеет следующий вид:

Проблема здесь заключается в том, что практически любая информация будет удовлетворять данному требованию, т.е., например, вы можете пройти валидацию, просто поставив пробел (мы покажем вам, как этого избежать).

Когда вы указываете атрибут required для полей типа email или url, браузер ожидает наличия определенного шаблона, по которому он сможет проверить информацию, но подобная проверка очень снисходительна и пропускает e-mail адреса вроде «z@zz» (читайте далее, чтобы узнать, как с этим бороться).

Лимиты

Мы можем установить базовые ограничения, такие как максимальная длина или минимальное и максимальное значение для числовых полей. Чтобы ограничить длину элементов input или textarea, используйте атрибут «maxlength». Это делается для того, чтобы вообще нельзя было ввести строку длиннее, чем значение атрибута «maxlength». Если вы попробуете вставить строку, которая превышает лимит, то форма просто обрежет ее.

Оформление

CSS3 псевдо-классы позволяют нам оформить любое поле формы в зависимости от его состояния. Вот данные псевдо-классы:

Это означает, что обязательные поля у вас могут выглядеть одним образом, необязательные - другим и т.д. В нашем демо-примере мы скомбинировали селекторы «valid» и «invalid» с псевдо-классом «focus», чтобы раскрасить поля формы в красный и зеленый цвета, когда пользователь выбирает их и начинает в них что-нибудь вводить.

input:focus:invalid, textarea:focus:invalid{ border:solid 2px #F5192F; } input:focus:valid, textarea:focus:valid{ border:solid 2px #18E109; background-color:#fff; }

input : focus : invalid , textarea : focus : invalid { border : solid 2px #F5192F; input : focus : valid , textarea : focus : valid { border : solid 2px #18E109; background - color : #fff;

Всплывающие подсказки

Вы наверняка замечали, что когда вы пытаетесь отправить неправильно заполненную форму, появляются всплывающие подсказки. Задав для наших полей атрибут «title» мы можем добавить дополнительные подсказки о том, каких значений наши правила валидации ожидают от пользователя.

Обратите внимание на то, что разные браузеры по-своему отображают всплывающие подсказки. В браузере Chrome значение атрибута title появится под основным текстом сообщения об ошибке и будет иметь меньший размер шрифта, чем текст об ошибке. Браузер Firefox вообще не будет отображать ваш текст для всплывающей подсказки до тех пор, пока вы не будете использовать атрибут «pattern», который будет использован для информации о шаблоне.