Плагин jquery validation

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

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

HTML

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

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

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

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

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

            $.validator.addClassRules({
                TestMaxValidation: {
                    max: 10
                }
            })

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

            $('input').change(function(e) {
                $('form').validate().element($(e.target));
            });

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

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

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

HTML

<input type="text" class="date required" name="somebody" />

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

Объект rules

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

jQuery

$('#form3').validate(
{
    rules : {
    field1:'required',
    field2:{
            digits:true,
            required:true
            }
    }
});
});

HTML

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

    <label >
        <span>Проверяем поле при помощи  объекта rules </span>
        <input name="field1" type="text"  >
    </label>

    <label for="email">
        <span>Поле №2</span>
        <input  name="field2" >
    </label>

    <button type="submit"  name="send">...Отправить</button>

</form>

Метод rules

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

jQuery

$( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input"
}
});

HTML

<form id="form4" action="" method="post">
    <label >
        <span>Добавляем правила при помощи метода <code>rules</code> </span>
        <input id="myinput" type="text"  />
    </label>
    <button type="submit"  name="send">...Отправить</button>
</form>

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

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

HTML

<input  type="text" minlength="15" url="true" required="true"   />

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

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

jQuery

            $('#form6').validate({
            rules:{
                one:{
                        digits:true,
                        required:true,
                        max:100
                    },
                two:{
                        minlength:6,
                        required:true
                    },
                  },
            messages:{
                one:{
                        digits:"Обязательно цифры",
                        required:"Поле оязательно",
                        max:"До 100"
                    },
                two:{
                        minlength:"Минимальное кол-во символов 6",
                        required:"Поле оязательны"
                    }
            }
            });

HTML

<form id="form6" action="" method="post">
    <span>Меняем текст для сообщений с ошибками </span>
    <input  type="text" name="one"  />
    <input  type="text"  name="two"  />
    <button type="submit"  name="send">...Отправить</button>
</form>

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

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

jQuery

$('#form7').validate({
    rules:{
        one:{
            digits:true,
            required:true,
            myMethod:20,
            }
        }
});

jQuery

$.validator.addMethod('myMethod',
    function(val,el,args)
{
    if(Number(val)*args  <= 100)
    {
        return  true;
    }
    else
    {
        return  false;
    }

    },"Ваше значение, помноженное"+
"на 20 , к сожалению, больше 100");

HTML

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

Пользовательская верификация реализуется при помощи метода 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. Все просто.

HTML

<form id="form8" action="" method="post">
<code class="new">
</code>
    <label for="name">
        <span>unhighlight и highlight, errorElement, errorClass, validClass </span>
        <input  id="name"  type="text" name="one"  />
    </label>
<button type="submit"  name="send">...Отправить</button>
</form>

jQuery

$("#form8").validate({
    rules:{
        one:{
    digits:true,
    required:true
}
    },
    messages:{
        one:{
    digits:"Обязательно цифры",
    required:"Поле оязательно"
}
    },
    errorElement: "em",
    errorClass: "errorMessages",
    validClass: "success",
    highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .addClass(errorClass);
    },
    unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
    .removeClass(errorClass);
    }
});