Реализация валидации с помощью jQuery Validation Plugin

January 12, 2017 Jazz Team Технические статьи, 1

 

Плагин jQuery Validation Plugin умеет проверять форму на корректность заполненных данных в соответствии с заданными правилами и динамически отображает ошибки пользователя.

Особенностями jQuery Validation Plugin являются:

• проверка URL и E-mail;
• проверка максимальных и минимальных значений, диапазонов чисел, дат;
• автоматическое отображение ошибок.

Принцип работы с плагином

Рассмотрим работу плагина на примере простой формы ввода логина и пароля.

Пример HTML формы:

<form id="loginform" action="" method="post">

Ваш логин:

<input type="text" name="login" />

Ваш пароль:

<input type="password" name="pswd" />
<input type="submit" name="enter" value="Войти" /></form>

Подключение файлов и библиотек:

Подключаем библиотеки jQuery и плагин на страницу.

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js">
    </script>

JS

Далее для HTML-формы с заданным id инициализируется плагин

($("#loginform").validate())

В атрибуте "rules" определяются поля по их имени (name="login"), и задаются правила для конкретного поля, по которым будет происходить валидация.

В параметре "messages" задаётся текст сообщения ошибки валидации для каждого правила в отдельности.

$(document).ready(function(){
           $("#loginform").validate({
             rules:{
                login:{
                  required: true,
                  minlength: 4,
                  maxlength: 16,
                },
                pswd:{
                  required: true,
                  minlength: 6,
                  maxlength: 16,
                },
             },
             messages:{
               login:{
                 required: "Это поле обязательно для заполнения",
                 minlength: "Логин должен быть минимум 4 символа",
                 maxlength: "Максимальное число символов - 16",
             },
               pswd:{
               required: "Это поле обязательно для заполнения",
               minlength: "Пароль должен быть минимум 6 символа",
               maxlength: "Пароль должен быть максимум 16 символов",
               },
             }
          });
 
});

CSS

Чтобы менять внешний вид сообщений об ошибке, нужно в CSS-файле работать с классом .error

.error{
color: red;
}

Список правил

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

jQuery, jQuery Validation Plugin, валидация, плагин

Создание собственного фильтра в Hibernate Search «Общий репозиторий» модель совместной разработки