jQuery валидация форм и полей в реальном времени


Содержание

JQuery валидация форм и полей в реальном времени

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Валидация формы на jQuery

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?


Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

Валидация формы на jQuery

Исходники

Пример

В сегодняшней статье мы будем с Вами создавать скрипт валидации формы с помощью javascript-библиотеки jQuery.

Валидация — это попросту говоря, проверка введенных пользователем данных в форму на соответствие тем или иным параметрам.

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

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

Создадим HTML структуру нашей формы:

Далее пропишем CSS стили для нашей формы:

Теперь наша форма выглядит так:

После того, как форма готова, приступаем к написанию кода для валидации:

Логика работы будет следующая: когда пользователь убирает курсор с поля (поле теряет фокус), оно проходит определенную проверку.

Если все введено согласно параметрам верно, тогда полю присваивается класс «not_error«. Иначе, если поле не прошло проверку на правильность введенных данных, оно получает класс «error«.

Присваивание классов — также важный момент в реализации данного подхода валидации. Именно они позволят нам проверить, будет ли доступна функции отправки формы или нет при нажатии на кнопку ее отправки.

В самом начале задаем условие, что когда DOM загружена, мы включаем скрипт в работу.

В набор объектов на проверку мы включаем все необходимые поля нашей формы. В качестве уникальных значений каждому из объектов формы задаем свой идентификатор. Устанавливаем событие потери фокуса blur на каждый объект из набора.

Когда поле потеряло фокус, сработал метод blur, конструкцией switch-case поверяется, какое именно поле это было. Для определения мы как раз и будем использовать те самые идентификаторы полей.

Для удобства в переменные id и val мы поместили значение идентификатора поля, которое потеряло фокус а так же его значение.

В блоке case мы уже осуществляем проверку текущего поля на те параметры, которые нам необходимы. К примеру, в моем примере я проверяю поле имени регулярным выражением и также на длину введенного в него значения.

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

Такая же схема работы со всеми объектами формы.

Пользователь заполнил все поля, допустим верно, и нажимает на кнопку отправки данной формы:

Сначала мы запрещаем стандартное поведение при нажатии на кнопку Submit. И самое главное — в блоке if мы проверяем количество элементов с классом not_error.

Напомню, данный класс мы добавляли ко всем полям без ошибок. Так как количество проверяемых объектов нашей формы было всего 3, то мы проверяем количество элементов с данным классом. Если условие срабатывает, тогда мы просто составляем AJAX-запрос на отправку данных формы в PHP-обработчик.

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

Обработчик send.php

На этом все. Надеюсь, данный материал будет для вас хорошей основой для собственных решений.

Материал подготовил Сергей Губарев специально для сайта CodeHarmony.ru


P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Плагин jquery validation

Данная статья посвящена замечательному плагину jQuery validation. Статья неоконченная и в ближайшем будущем будет обязательно расширяться, с приведением примеров, конечно.

Сперва необходимо подключить к документу плагин validation. Страница плагина

Метод validate — проверяет выбранную форму. Методу validate передается объект, содержащий конфигурационные настройки, по которым проверяются элементы формы.

Определение правил проверки основанное на использовании классов

Вы определяете правило(а) и связываете его(их) с конкретным классом.

Ниже мы создаем правило, которое будет работать лишь с полями имеющими класс TestMaxValidation.

Выполняем проверку при изменении значения текстового поля .

Список встроенных методов проверки

Метод Описание Значения, или
как использовать
required Делает элемент обязательным. Работает с inputs, selects, checkboxes и radio buttons true или false
remote Запрашивает ресурс для проверки элемента формы remote: «check-email.php»
minlength Указываем элементу минимальную длину (кол-во символов) minlength: 3
maxlength Указываем элементу максимальную длину (кол-во символов) maxlength: 4
rangelength Указываем диапозон для кол-ва символов rangelength: [2, 6]
min Указываем минимальное числовое значение min: 13
max Указываем максимальное числовое значение max: 13
range Числовое значение должно нвходиться в пределах диапозона range: [13, 23]
email Значение должно соответствовать корректному e-mail адресу email: true
url Значение должно соответствовать корректному url-адресу url: true
date Значение должно соответствовать корректной дате js date: true
number Значение должно быть десятичным числом number: true
digits Значение должно содержать лишь цифры digits: true
creditcard Значение должно быть действительным номером кредитной карточки creditcard: true
equalTo требует, чтобы элемент соответствовал (был эквивалентен) другому элементу password_again: <
equalTo: «#password» >

Второй способ верификации элемента через классы

Вы также можете назначить правила верификации элемента непосредственно добавляя в элемент нужный класс (возможные классы приведены в таблице ‘список встроенных методов проверки’). В данном случае класс не оказывает никакого влияния на css: этим классом вы лишь говорите плагину о том какой тип верификации необходимо применить к элементу формы. Например, мы хотим проверить поле на корректность введенной даты и обязательность. Для этого нам понадобится следующий код:

Верификация при помощи объекта rules , метода rules

Объект rules

Объект rules , содержащий поля и типы верификации, передается в функцию validate . Чтобы использовать несколько правил к одному полю, необходимо создать еще один объект. Название поля есть значение атрибута name валидируемого поля.

jQuery

Метод rules

Существует специальный метод ссылка -> rules , при помощи которого вы можете читать, добавлять или удалять правила у элемента.

jQuery

Верификация при помощи атрибутов

Заранее предопределенные методы проверки (см. таблицу) можно использовать как атрибуты в элементе, этим вы сообщаете плагину validation, что необходимо осуществить конкретную проверку по атрибуту и его значению.

Использование свойства messages

Вы можете поменять текст с сообщением об ошибке при помощи свойства messages . Лучше всего понять работу messages на простом примере: если вкратце, то вы определяете объект messages и в качестве значение используете, соответственно, имя элемента, название(я) проверки(ок) и текст с ошибкой. Вот так:

jQuery

Собственная проверка для плагина validation

Создать собственную проверку относительно легко, перейдем сразу к примеру:

jQuery

jQuery

Пользовательская верификация реализуется при помощи метода addMethod, который вызывается посредством свойства jquery validator. Итак, методу addMethod передаются следующие параметры:

  • Имя проверки
  • Функция, выполняющая проверку: function(val, el, args)
  • Сообщение, в случае ошибки
  • Об аргументе args стоит сказать особо, это аргументы, указанные при определении проверки. el – это HTMLelement ; val – это значение элемента.

Работаем с сообщениями об ошибках

Свойство errorClass позволяет нам указать класс для некорректных элементов.

ErrorElement . По умолчанию сообщение с ошибкой выводится в сестринском элементе label . Чтобы изменить, например, label на div достаточно указать: errorElement: ‘div’ . Более подробно на странице плагина.


Чтобы регулировать поведение некорректных элементов, существуют две функции highlight (как выделять некорректны элемент) и unhighlight (ошибка ликвидирована, по умолчанию удалят error-класс). Обе функции принимают три аргумента: element , errorClass , validClass . Все просто.

Простая валидация для формы jquery

Эта очень неприятная тема для любого программиста. Чем больше полей в форме, тем больше и сложнее скрипт для валидации формы jquery. Были времена когда программисты делали валидацию на PHP. Подобная валидация довольно громоздко выглядела. Недостаток такой валидации PHP в том, что постоянно нужно использовать сессии или куки. В этом случае постоянно перегружается страница, что делает лишние запросы к базе данных.

Валидацию на jquery сделать намного проще. Существуют несколько плагинов jquery для проверки полей формы. Я покажу вам очень простой способ. Вы сможете его видоизменить и добавить свои фирменные проверки. Образно говоря, в один массив будут помещены ошибки. Затем этот массив превратится в сплошную строку. Вы увидите на выводе сразу несколько ошибок.

Вставьте следующий код в документ html. Обратите внимание на то, что у вас одна кнопка и 3 поля.

Давайте рассмотрим сам скрипт для валидации формы. Сначала собираются данные в переменные. Обязательно сделайте очистку данных от пробелов. » » — это тоже символ. Далее происходит проверка данных на наличие символов. Вы можете добавить свои фирменные проверки. Даже можете использовать регулярные выражения. Всё зависит от поставленной задачи. Затем происходит финальная проверка на наличие ошибок. Если есть хотя бы одна ошибка, то алерт выведет ошибку. Обратите внимание на join(). Эта функция собирает все элементы массива и выводит их в виде строки через разделитель. Читайте о массивах на странице массивы в javascript. Я не использую циклы и функцию each(). Так проще )). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).

До сих пор я использую эту схему. Она мне нравится своей простотой.

JavaScript валидация форм

При помощи JavaScript можно проводить валидацию (проверку данных) форм HTML.

Например, в следующем примере если поле формы (fname) пусто, то функция выводит сообщение с предупреждением и возвращает значение false, чтобы предотвратить отправку данных формы:

Функцию можно вызывать при возникновении события отправки данных формы:

JavaScript может проверять ввод чисел

Часто JavaScript используется для проверки введенных чисел. Попробуйте сами:

Введите число от 1 до 10

Автоматическая проверка HTML форм

Проверка HTML форм также может проводиться браузером автоматически.

В следующем примере, если поле формы (fname) пусто, атрибут required запрещает отправку данных формы:

Внимание! Автоматическая проверка HTML форм не работает в Internet Explorer 9 и более ранних его версиях.

Проверка данных

Проверка данных проводится для того, чтобы гарантировать, что пользователь ввел корректные, полезные данные без ошибок.

Типичная проверка состоит в поиске ответов на следующие вопросы:

  • Заполнил ли пользователь все необходимые поля?
  • Корректны ли введенные данные?
  • Не ввел ли пользователь текст в поля для цифр?

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

Проверка может осуществляться разными способами и реализовываться разными путями.

Проверка на стороне сервера осуществляется веб-сервером после получения им введенных данных.

Проверка на стороне клиента осуществляется браузером до отсылки введенных данных на сервер.

Ограничивающая проверка HTML

В HTML5 была добавлена новая концепция HTML проверки, название которой можно было бы перевести как «ограничивающая проверка» (англ. Constraint Validation).

Ограничивающая проверка HTML основывается на:

  • HTML атрибутах элемента ввода,
  • CSS псевдоселекторах,
  • свойствах и методах DOM

Атрибуты ограничивающей проверки элемента ввода

Атрибут Описание
disabled Определяет, что элемент ввода отключен
max Определяет максимальное значение в элементе ввода
min Определяет минимальное значение в элементе ввода
pattern Определяет шаблон значений в элементе ввода
required Определяет, что элемент ввода обязателен для заполнения
type Определяет тип элемента ввода

Полный список атрибутов см. в справке по HTML тегу .


CSS псевдоселекторы ограничивающей проверки

Селектор Описание
:disabled Выбирает элемент ввода с атрибутом «disabled»
:invalid Выбирает элемент ввода с некорректным значением
:optional Выбирает элемент ввода без атрибута «required»
:required Выбирает элемент ввода с атрибутом «required»
:valid Выбирает элемент ввода с корректным значением

О том, что такое псевдоклассы см. раздел CSS псевдоклассы.

Методы DOM ограничивающей проверки

Метод Описание
checkValidity() Возвращает true, если элемент ввода содержит корректные данные
setCustomValidity() Устанавливает свойство validationMessage для элемента ввода

Пример
Если поле ввода содержит некорректные данные, вывести сообщение:

Свойства DOM ограничивающей проверки

Свойство Описание
validity Содержит набор свойств типа boolean, определяющих состояние валидности (правильности) элемента ввода
validationMessage Содержит сообщение, которое выведет браузер в случае неудачной проверки
willValidate Указывает, будет ли элемент ввода проверяться

Свойства валидности

Свойство validity элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Свойство Описание
customError Установлено в true, если задано пользовательское сообщение о валидности.
patternMismatch Установлено в true, если значение элемента не соответствует шаблону в атрибуте pattern.
rangeOverflow Установлено в true, если значение элемента больше значения в атрибуте max.
rangeUnderflow Установлено в true, если значение элемента меньше значения в атрибуте min.
stepMismatch Установлено в true, если значение элемента неверно по атрибуту step.
tooLong Установлено в true, если значение элемента превышает значение атрибута maxLength.
typeMismatch Установлено в true, если значение элемента неверно по атрибуту type.
valueMissing Установлено в true, если у элемента (с атрибутом required) нет значения.
valid Установлено в true, если значение элемента валидно.

Пример №1. Свойство rangeOverflow.

Если число в поле ввода больше 100 (атрибут max элемента ), то вывести сообщение:

Пример №2. Свойство rangeUnderflow.

Если число в поле ввода меньше 100 (атрибут min элемента ), то вывести сообщение:

JS, JQuery: Универсальная валидация форм и полей ввода

Всем привет. Не смотря на свою 110% загруженность я стараюсь пополнять свой блог новыми полезными заготовками! Сегодня я хочу привести пример удобного плагинчика, который поможет вам реализовать проверку полей форм на стороне клиента, т.е. в с помощью javascript.

Ни для кого не секрет, что любые формы на сайте нужно проверять. Нужно проверять как на стороне сервера (must have), так и на стороне клиента. Форм много, и добавлять проверки для каждого поля ввода достаточно противное занятие. Давайте попробуем обобщить данную задачу.
Если пораскинуть мозгами, то валидация форм как правило сводится к нескольким задачам:
1) Проверка обязательных полей.
2) Блокировка нежелательных ввода символов
3) Проверка введенного значения с желаемым результатом.

А что лучше всего подходит для проверки строк? Правильно — регулярные выражения, именно их мы и будет активно применять для решения поставленных задач!

Пункт 1, как правило, решается добавлением атрибута required к тегу формы (например ). Однако это приводит к появлению окна сообщения, реализованного на уровне браузера. Кому то это решение подходит, но как правило дизайнеры предлагают свое видение данных ошибок, а как следствие реализовывать валидацию обязательного заполнения стоит с помощью скриптов.

Для этого добавим следующий код.

Примечание: Код предполагает наличие библиотеки Jquery, а так же что все инпуты имеют некий родительский контейнер (как правило так оно и бывает в реальных проектах). Пример:

Приведенный выше код автоматически удалит атрибут required у тегов и создаст вместо него атрибут data-required=»true».

Для решения второй задачи создадим следующий обработчик:

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

Если же мы хотим разрешить вводить все кроме символов (, ), !, ?, то логичней будет воспользоваться обработчиком блокирования символов:

Для решения третей задачи, нам понадобится вспомогательная функция.

Данный код проверяет переданный объект «o» (это будет инпут) и в случае каких либо ошибок создает дополнительный блок span с сообщением об ошибке. Так же данная функция обрабатывает созданный в пункте 1 атрибут data-required.

Теперь необходимо повесить данную функцию на наши элементы

Теперь для проверки валидность поля на желаемый шаблон достаточно добавить тегу атрибут data-regexp, например проверка поля на формат даты в виде ГГГГ-ММ-ДД:

Вот собственно и все. Всего несколько строк кода, позволяют нам полностью перенести задачу валидации формы из скриптов в html файл путем добавления нужных атрибутов для элементов ввода. Описанные выше скрипты охватывают более 50% случаев всех необходимых валидаций, а значит способны сэкономить кучу времени Вам как разработчику.

Техники валидации форм

Это перевод статьи Ире Адеринокун — «Form validation techniques».

Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.

Используем CSS

В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.


Используя :valid и :invalid , мы можем показать пользователю, правильно ли заполнено поле по мере ввода.

Стилизация псевдоклассов :valid и :invalid

Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid , а необязательные — как :valid . Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.

Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.

Стилизация по :valid и :required

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

Устанавливая атрибуты min , max и step , мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1 , 12 и 123 в три поля и отправит форму:

Стандартный тултип валидации

В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.

Добавляем несколько сообщений об ошибках в один тултип

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

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch , stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.

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

Теперь при попытке отправить форму мы увидим вот это:

Отображаем несколько ошибок в одном тултипе

Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей.

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

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

Вот что происходит при клике на submit теперь:

Отображаем все ошибки для всех полей в DOM

Используем нестандартные проверки валидности

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

Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity , мы можем просто-напросто добавить туда ещё несколько проверок.

Валидация в реальном времени

Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:

  1. Требования для каждого поля чётко видны до того, как пользователь начал печатать.
  2. Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
  3. Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.

В статье на следующей неделе (оригинал, перевод готовится) я покажу, как реализовать валидацию в реальном времени, переделав вот такую простую форму регистрации:

Пример валидации в реальном времени

Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.

Не валидирует поле — jQuery Val >

Как это часто бывает, для реализации определенных «фич» и улучшений для сайта, я использую готовые jQuery плагины. Хорошие решения просты в подключении, имеют широкий функционал и отлично справляются со своей задачей — зачем писать свой велосипед?


Так для валидации форм и отдельных полей я пользуюсь отличным плагином jQuery Validation Plugin. Но сегодня произошло событие, которое побудило меня написать эту короткую заметку. Плагин отказался валидировать поле. Да, да. Я проверил все несколько раз — объявление, написание и даже ошибки в консоли. Все было правильно. Все поля проходили валидацию, кроме одного — чекбокса согласия с пользовательским соглашением. Давайте разберемся что могло произойти.

Честно признаться я до сих пор не смог понять точную причину, но решение было найдено. Дело в том, что этот чекбокс был оформлен с помощью css и выглядел не как стандартный элемент (ох уж эти дизайнеры). Поэтому настоящий checkbox был спрятан от глаз. У него стояли всякие правила типа: position:absolute; top:0; left:0; width:0; height:0; margin:0; opacity:0; и внимание. padding:0;. Именно из-за padding:0; этот плагин отказывался валидировать поле. Убрав это свойство — все заработало просто прекрасно! Возможно, вам тоже пригодится это.

Почему мне непонятна причина такого поведения? Потому что на другом проекте точно такой же чекбокс с точно такими же css правилами и padding:0; проходит валидацию! Детальное сравнение ни к чему не привело — формы идентичны по содержанию. Видимо, это внутренняя жизнь плагина и надеюсь, что он не захочет захватывать человечество. Всем успехов:)

Валидатор HTML форм (плагин jQuery — Val > 12.06.2014 Дмитрий Кочетов Плагины

Здравствуйте, уважаемые читатели XoZbloga! В этой статье рассмотрим jQuery плагин для валидации HTML форм — Val >

Подключение

Собственно, для подключение нам необходима jQuery и сам плагин:

Произвольная HTML форма:

Остается только выполнить вызов метода validatr для все форм:

Выросла посещаемость на сайте, возросла нагрузка и обычного хостинга не достаточно?! Попробуйте виртуальный сервер windows – отличный вариант для ресурсоемких проектов.

Настройка

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

Атрибут Описание
data-location Положение сообщения об ошибке. Если значение установлено в атрибуте поля, то значения опции указанные в настройках плагина игнорируется. Возможные значения top , left , right , bottom .
data-message Текст сообщения об ошибке.
form Позволяет указать дополнительную форму для валидации. Значением этого атрибута является идентификатор формы, которую необходимо проверять.
required Указывает на то, что поле должно иметь значение.

Валидатор работает со всеми типами полей формы, логика которых подразумевает проверку. Например при использовании текстовых полей необходимо прописывать собственные правила валидации в виде регулярных выражений указанных в атрибуте pattern .

Небольшой пример использования атрибутов:

Переходим к рассмотрению опций плагина, используемых при его инициализации в 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 и свое стилевое оформление. Обязательна заглушка <> , вместо нее подставляется непосредственно текст сообщения об ошибке.
theme Строка ‘ ‘ Названия классов CSS, добавляемых к HTML разметке сообщения об ошибке. Если не указано используется предопределенный стиль. Изначально могут использоваться 2 темы: bootstrap и jqueryui .
valid Функция $.noop Функция, которая вызывается после успешной проверки формы. Для предотвращения действие по умолчанию (отправки формы) использовать Return false.

Пример использования данных опций:

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

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Используйте плагин JQuery Validation для добавления в мою форму валидации в реальном времени

Я хочу проверить свою форму в режиме реального времени (на вкладке) с помощью этого jquery-плагина: https://jqueryvalidation.org/rules/?

Это пример моей текущей функции проверки:

По умолчанию он проверяет событие keyup . Тем не менее, проверка является «ленивой», а не «нетерпеливой», что означает, что проверка не происходит до первого щелчка submit. Поэтому вам придется настроить некоторые настройки.

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

Использование jQuery Validate для проверки форм

Проверьте, подключен ли в макете файл jquery.validate.min.js, в системе управления он расположен в hostcmsfiles/jquery/jquery.validate.min.js

Указание валидации формы

Валидация конкретной формы или форм с классом validate указывается следующим образом:

Валидация всех форм:

Способы валидации форм

Использование имена классов как правила

Тем полям, которые нужно провалидировать, добавбялете атрибут

С помощью метод addClassRules вы можете расширить и добавить условие валидации:

или сразу для нескольких полей

Передача опций при инициализации validate()

Методу validate() передаем объекты rules и messages которые состоят из пар ключ/значение. В rules в качестве ключа указываем атрибут name поля, значением указываем правило проверки. В messages в качестве ключа так же идет атрибут name поля, а в качестве значения указываем предупреждающее сообщение.

  • required — поле обязательное для заполнения (true или false);
  • remote — указывается файл для проверки поля (например: «check.php»);
  • email — проверяет корректность e-mail адреса (true или false);
  • url — проверяет корректность url адреса (true или false);
  • date — проверка корректности даты (true или false);
  • dateISO — проверка корректности даты ISO (true или false);
  • number — проверка на число (true или false);
  • digits — только цифры (true или false);
  • creditcard — корректность номера кредитной карты (true или false);
  • equalTo — равное чему-то (например другому полю equalTo: «#pswd»);
  • accept — проверка на правильное расширение (accept: «xls|csv»);
  • maxlength — максимальное кол-во символов;
  • minlength — минимальное кол-во символов;
  • rangelength — кол-во символов от скольких и до скольких (rangelength: [2, 5]);
  • range — число должно быть в диапазоне от и до (range: [2, 12]);
  • max — максимальное значение числа;
  • min — минимальное значение числа.

Пример использования в XSL-шаблоне

Указываем форме класс например validate, и далее в XSL-шаблоне формы добавляем код проверки формы (пример взят из формы быстрого заказа в адаптивном шаблоне):

Илон Маск рекомендует:  Iis основные сведения о кластеризации
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL