jQuery Validation Engine

jQuery: проверка формы с помощью jQuery Validation Engine

· jQuery и JavaScript, Библиотеки и Блог · 3 мин чтения

В этой записи пойдет речь о проверке формы на сайте, например, проверить формат email, ссылки или числа, количество символов, а так же многое другое. 

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

Ниже вы можете посмотреть демо работы этого плагина. Так же заглянуть на официальную страницу на GutHub и скачать сам архив плагина.

Демо | Официальный страница плагина (Github) | Скачать jQuery Validation Engine

Что может данный плагин?

  • Проверка на обязательное поле, по типу required для <input>.
  • Проверка на выбор какого-либо значения в <select>. Например, если у вас по умолчанию стоит «Выбрать значение», а кроме него есть еще варианты выбора, то скрипт проверить выбрал ли человек что-то еще (кроме значения по умолчанию).
  • Проверка полей формы на правильное значение. Например проверка формата email (почты), ссылки или номер банковской карты и так далее.
  • Разные равенства. Например, если у вас есть форма регистрации и вы хотите проверить правильно ли введите оба пароля («Введите пароль» и поле «Повторно введите пароль»).
  • Проверка полей формы на количество символов. Например, если вы хотите, чтобы минимальный объем введенной информации  в input был 5 символов или чтобы максимальный был 5 символов и тд.
  • Проверка значения полей на разные условия, например, «больше чем», «меньше чем» и тд, какого-либо числа.
  • Так же можно устанавливать условия, например, если у вас есть два поля, которые вы хотите, чтобы пользователь сначала ввел, прежде чем проверка заработает на третьем.
  • Проверка дат, на прошедшее или будущее число. Например, если у вас есть datepicker и после того как человек ввел число, он мог его подправить, тем самым сделав его неверным. Именно в этом случае и можно сделать проверку на достоверность даты в целом или на прошедшее или будущее число.

Как начать пользоваться?

  1. Для начала, нужно установить jQuery на ваш сайт (конечно если он уже не установлен)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/ javascript"></script>
  2. Далее установить плагины валидации на ваш сайт перед </body>. Если вы еще не скачали архив с плагином, то это можно сделать по этой ссылке.
    <script src="js/jquery.validationEngine-ru.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
  3. Далее в <head></head> устанавливаем стили от плагина.
    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

    После этого этапа jQuery Validation Engine установлен и теперь можно воспользоваться его функциями.

Функции плагина

data-pompt-position — устанавливает расположение подсказок о ошибке. Возможные варианты: «topLeft» (сверху левый угол), «topRight» (сверху правый угол), «bottomLeft» (низ слева), «centerRight» (центр справа) и «bottomRight» (низ справа). По умолчанию стоит «topRight».

Если у вас один <input>, то этот атрибут можно напрямую установить на элемент, в случае, если у вас много элементов и вы хотите использовать одну позицию у всех подсказок, то можно воспользоваться примером ниже. Так же ниже, вы увидите пример в использовании data-prompt-position для определенного <input> элемента.

$("#formID1").validationEngine('attach', {promptPosition : "centerRight", scroll: false});

Вместе #formID1 вы можете указать уникальное ID вашей формы. Далее для ID вы присваиваете функции плагина:

attach — сделат проверку формы без нажатия кнопки отправки формы

promptPosition — установливает позицию для показа подсказок о ошибках

scroll — указывает на то, что нужно ли переместить экран пользователя на этот элемент при ошибке

Самая простая функция этого плагина — это проверка на наличие чего-либо написанного внутри <input>. С помощью HTML этого же результата можно добиться, если прописать required="required" атрибут.

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

Проверка почты

<input value="examaple@gmail.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />

В примере выше, я прописал класс validate[], а внутри required и custom[email]. required — как уже можно догадаться — это то, о чем я говорил выше, а custom[email] — это проверка правильного формата почты.

PS. Если вы хотите быть уверенными 100%, что в поле для почты вам не введут ничего вредоносного, тогда указывайте type="email" — это лучше любого плагина. Это встроенная проверка браузером, которая поможет избежать лишних проблем связанных с проверкой почты.

Проверка даты

<input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />

<input> из пример выше является обязательным полем, а так же проверяется формат даты.

Проверка ссылки

<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />

<input> из примера выше проверяет ссылку на правильный формат, так же является обязательным полем для ввода данных.

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

На этом все. Спасибо, что прочитали эту запись и я надеюсь, что вы нашли для себя что-то новое.

Если у вас остались какие-либо вопросы — вы можете их задать ниже к этой записи.