В этой записи пойдет речь о проверке формы на сайте, например, проверить формат email, ссылки или числа, количество символов, а так же многое другое.
Проверка полей формы с jQuery можно осуществить с помощью плагина, который называется jQuery Validation Engine. Он специально предназначен для это работы.
Ниже вы можете посмотреть демо работы этого плагина. Так же заглянуть на официальную страницу на GutHub и скачать сам архив плагина.
Демо | Официальный страница плагина (Github) | Скачать jQuery Validation Engine
Что может данный плагин?
- Проверка на обязательное поле, по типу required для
<input>. - Проверка на выбор какого-либо значения в
<select>. Например, если у вас по умолчанию стоит «Выбрать значение», а кроме него есть еще варианты выбора, то скрипт проверить выбрал ли человек что-то еще (кроме значения по умолчанию). - Проверка полей формы на правильное значение. Например проверка формата email (почты), ссылки или номер банковской карты и так далее.
- Разные равенства. Например, если у вас есть форма регистрации и вы хотите проверить правильно ли введите оба пароля («Введите пароль» и поле «Повторно введите пароль»).
- Проверка полей формы на количество символов. Например, если вы хотите, чтобы минимальный объем введенной информации в input был 5 символов или чтобы максимальный был 5 символов и тд.
- Проверка значения полей на разные условия, например, «больше чем», «меньше чем» и тд, какого-либо числа.
- Так же можно устанавливать условия, например, если у вас есть два поля, которые вы хотите, чтобы пользователь сначала ввел, прежде чем проверка заработает на третьем.
- Проверка дат, на прошедшее или будущее число. Например, если у вас есть datepicker и после того как человек ввел число, он мог его подправить, тем самым сделав его неверным. Именно в этом случае и можно сделать проверку на достоверность даты в целом или на прошедшее или будущее число.
Как начать пользоваться?
- Для начала, нужно установить jQuery на ваш сайт (конечно если он уже не установлен)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/ javascript"></script>
- Далее установить плагины валидации на ваш сайт перед
</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>
- Далее в
<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> из примера выше проверяет ссылку на правильный формат, так же является обязательным полем для ввода данных.
Плагин на самом деле очень нужный. Особенно когда касается момента разработки сайта и его безопасности, потому что никто из нас не предохранен от вредоносных значений, который приходят в веб-приложение через форму.
На этом все. Спасибо, что прочитали эту запись и я надеюсь, что вы нашли для себя что-то новое.
Если у вас остались какие-либо вопросы — вы можете их задать ниже к этой записи.
