Ростелеком ТВ 

 Валидация полей произвольных форм и контейнеров на 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=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: + Плюс означает один или больше. Строчные и прописные +

    Последнее обновление: 08.04.2016

    Итак, в нашем распоряжении имеются различные элементы, которые мы можем использовать на форме. Мы можем вводить в них различные значения. Однако нередко пользователи вводят не совсем корректные значения: например, ожидается ввод чисел, а пользователь вводит буквы и т.д. И для предупреждения и проверки некорректного ввода в HTML5 существует механизм валидации.

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

    Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

      required : требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)

      min и max : минимально и максимально допустимые значения. Для элемента input с типом datetime-local, date, month, time, week, number, range

      pattern : задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password, email, url, search, tel

    Атрибут required

    Атрибут required требует обязательного наличия значения:

    Валидация в HTML5

    Логин:

    Пароль:

    Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам сообщения об ошибке, а данные не будут отправлены на сервер:

    В зависимости от браузера визуализация сообщения может несколько отличаться. Также границы некорректного поля ввода могут окрашиваться в красный цвет. Например, поведение при отправке пустых сообщений в Firefox:

    Атрибуты max и min

    Для ограничения диапазона вводимых значений применяются атрибуты max и min:

    Валидация в HTML5

    Возраст:

    Атрибут pattern

    Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых . Рассмотрим самые простейшие примеры:

    Валидация в HTML5

    Телефон:

    Здесь для ввода номера телефона используется регулярное выражение \+\d-\d{3}-\d{3}-\d{4} . Оно означает, что первым элементом в номере должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение \d{3} означает три подряд идущих цифры, а \d{4} - четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате "+1-234-567-8901".

    Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:

    Отключение валидации

    Не всегда валидация является желаемой, иногда требуется ее отключить. И в этом случае мы можем использовать либо у элемента формы атрибут novalidate , либо у кнопки отправки атрибут formnovalidate :

    Валидация в HTML5

    Телефон:

    От автора: Когда вы собираете информацию от пользователей с помощью формы, использование хоть какой-то валидации данных является обязательным моментом. Если не обратить внимание на данный момент, то это может привести к потере покупателей, порче данных в базе данных (БД) и даже к появлению брешей в безопасности вашего веб-сайта. Так исторически сложилось, что валидация форм всегда вызывала головную боль. На стороне сервера это осуществить легче благодаря полноценным фреймворкам, которые сделают все за вас, но на стороне клиента это чаще всего заканчивается использованием JavaScript библиотек, которые отнимают немало усилий для их интеграции.

    К счастью, HTML5 предоставляет несколько возможностей, которые способны решить большую часть вопросов, связанных с валидацией форм. Формы в HTML5 теперь имеют встроенную поддержку для валидации через использование специальных атрибутов и новых типов элемента input. А это также дает вам больше контроля над оформлением форм через CSS.

    Посмотрите на онлайн-пример валидации формы и прочитайте небольшую шпаргалку по основам валидации форм в HTML5.

    Специальные типы элемента Input

    В HTML5 представлены несколько новых типов элемента input. Они могут быть использованы для создания полей ввода, которые будут принимать только определенный вид данных. Вот новые типы, которые появились в HTML5:

    Чтобы использовать один из новых типов, укажите его название в качестве значения у атрибута type:

    < input type = "email" / >

    Если браузер не поддерживает данный тип элемента input, то текущий элемент будет вести себя, как обычное текстовое поле ввода. Также, вам будет полезно узнать о том, что некоторые типы полей (например, «email» и «tel») приводят к открытию на мобильных устройствах специальных клавиатур с ограниченным набором клавиш, а не полной раскладки QWERTY. Более подробную информацию обо всех типах элемента input вы найдете на сайте MDN – .

    Обязательные поля

    Простое добавление атрибута «required» для элемента input, select или textarea сообщит браузеру о том, что у данного поля должно быть значение. Воспринимайте это, как красную звездочку*, которую мы видим в большинстве регистрационных форм.

    < input type = "checkbox" name = "terms" required >

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

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

  • 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"".

    Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - 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. Если она не подключена ранее, сделайте это, добавив вот такую строку:

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

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