Jquery validate min js

При использовании форм на сайте стоит осуществлять проверку введённых данных. Это не только обеспечивает правильность введенной информации, но и улучшает пользовательский опыт.

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

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

В этой статье мы рассмотрим, как с помощью jQuery выполнить валидацию на стороне клиента. Сначала проверим данные формы, написав правила валидации с нуля.Во втором примере покажем, как этот процесс упростить с помощью плагина jQuery Validation.

Для начала подключите библиотеку jQuery в HTML-файле.

Добавьте следующую форму.

Приведенный выше код выведет простую форму с четырьмя полями и кнопкой отправки данных.

Для формы используйте следующие стили CSS.

Добавьте следующий код JavaScript в файл HTML.

В приведенном выше примере мы добавляем обработчик формы, который будет вызываться при отправке данных. Сначала в нем вызывается функция preventDefault() , чтобы предотвратить отправку данных. Затем мы создаём несколько переменных и присваиваем им значения различных полей формы.

Пока не обращайте внимания на строку $(«.error»).remove(); , мы вернёмся к ней позже.

После получения значений полей формы выполняем несколько тестов, чтобы проверить корректность введенной пользователем информации. Мы проверяем, содержат ли значения поля first_name , last_name и email . Если пользователь оставил поле пустым, то к нему добавляется тег span с сообщением об ошибке.

Затем добавляем проверку для поля email. Для этой проверки мы используем регулярное выражение . В конце мы проверяем длину пароля, чтобы убедиться, что он содержит не менее 8 символов.

Читайте также:  Microsoft office single image 2010 что это

Строка $(«.error»).remove() ; удаляет из документа любые элементы с классом error . Без нее каждый раз при возникновении сбоев при отправке формы сообщения о новых ошибках будут добавляться к предыдущим. В результате этого будут отображаться дублирующие сообщения.

Отправьте форму с некорректными данными, и вы увидите сообщения об ошибках.

Использование плагина jQuery Validation

В предыдущем примере мы написали, который проверял данные формы. Чтобы сделать этот процесс проще, используйте специальную плагин jQuery Validation . Укажите несколько правил для каждого поля формы, которое нужно проверить, а плагин выполнит всю валидацию за вас.

Чтобы увидеть плагин в деле, подключите jQuery в файле HTML.

Добавьте вторую форму в ваш файл.

Добавьте следующий JavaScript- код в функцию $(document).ready(function() <>) после блока $(‘#first_form’).submit(function(e) <>) .

Мы применили правило required ко всем полям формы. Для поля адреса электронной почты добавили правило email . А к полю пароля- правило, которое проверяет минимальную длину в 8 символов.

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

Данная публикация представляет собой перевод статьи « Form Validation Using Jquery Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с одним из наиболее популярных решений для проверки форм. Речь идет о плагине jQuery Validation для валидации форм. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Валидация форм и проверка их полей на соответствие определенному формату и наличие определенных данных — это фактически стандартная задача при работе с формами на сайте. Решить ее можно различными способами и средствами.

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

В этой статье мы с вами воспользуемся вторым вариантом и используем возможности плагина jQuery Validation и поработаем со следующей формой:

Читайте также:  Djvu как перевести в другой формат pdf

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как обычно, начнем со скачивания и подключения плагина. Плагин можно скачать с GitHub или взять из исходников к статье. Подключаем плагин после библиотеки jQuery:

Данная статья посвящена замечательному плагину 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: этим классом вы лишь говорите плагину о том какой тип верификации необходимо применить к элементу формы. Например, мы хотим проверить поле на корректность введенной даты и обязательность. Для этого нам понадобится следующий код:

Читайте также:  Скидка 10 процентов бонприкс

Верификация при помощи объекта 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 . Все просто.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector