Реинкарнация проверки форм

Как-то в начала века я утянул со skill.ru простой, но жутко хорошо сделанный JavaScript -сценарий проверки форм на стороне клиента, который нашёл своё применение во множестве различных web-проектов. Иногда функциональности скрипта мне не было достаточно, и тогда я дописывал и изменял код под свои нужды. К сожалению, в коде не было указано ни имя, не адрес автора, потому я не смог ни поблагодарить его, ни послать ему модифицированный код.

Проверка формы на стороне клиента — штука весьма удобная. Потому как позволяет не ожидать ответа от сервера, а мигом, ещё для отправки формы обрабатывающему сценарию, подсветить некорректно заполненные поля и дать возможность исправится. Это не самый идеальный вариант (предел совершенства — использование какого-нибудь ПО для обеспечения качества данных, например, «Фактор» от HFL) поскольку инициирует отрицательную обратную связь, заставляя пользователя чертыхаться и вносить изменения, дабы угодить «этому дурацкому сайту», но в целом — волне удобоваримое (в т.ч. и по трудозатратам) решение. Апофеозом подобной проверки, на мой субъективный взгляд, является форма регистрации на Автокадабре, где значения элементов ввода проходят проверку сразу после потери фокуса и пользователь получает обратную связь максимально быстро.

В один прекрасный момент захотелось совместить эти два решения, а заодно и переписать код под какую-нибудь из популярных javascript-библиотек. Прошедший пятничный вечер был посвящён именно этому занятию — исходный сценарий со всплывающими подсказками преобразился в небольшое дополнение к библиотеке jQuery.

Как это работает

Как и баллоны с skill.ru, FormCheck базируется на добавлении дополнительных атрибутов к html-тэгам. Это более комфортный вариант, нежели формирование каких-либо специализированных управляющих последовательностей. К сожалению, названия атрибутов пришлось поменять — в стандарте WebForms 2, поддерживаемом браузером Opera, атрибут pattern является служебным и служит ровно для тех же целей, но интерпретируется слегка по-другому (чем порой вызывает неработоспособность проверок).

Перед использованием библиотеки необходимо прописать в заголовок HTML-файла строчки

Комбинации атрибутов и их значений примерно следующие:

• к тегу form проверяемой формы добавляем атрибут vmethod, который определяет как будет проверяться форма и может принимать следующие значения:
  • online — элементы проверяются сразу после потери фокуса;
  • onsubmit — проверка происходит у всех полей при нажатии на кнопку.
• к тегам input type=»text», input type=»password» и textarea добавляются следующие атрибуты:
  • vmethod — определяет методику проверки. Может принимать три значения:
    • pattern — когда поле должно быть обязательно заполненным и соответствовать шаблону, задаваемому атрибутом vparam, о чем ниже;
    • optional — поле может быть пустым, но если содержит какое-либо значение, то значение должно соответствовать шаблону из vparam (это делается для желательных полей);
    • callback — в этом случае для проверки вызывается функция, обозначенная в vparam, которой передаётся элемент для проверки. Это сделано для обеспечения взаимных проверок полей (например, паролей на совпадение) или реализации вспомогательных элементов интерфейса (например, проверок учётного имени на допустимость или отображения степени подбороустойчивости пароля). Поскольку потенциально процедура проверки может занять время (например, из-за AJAX-запроса на сервер), то в элементе отображается пиктограмма ожидания. Типовая callback-функция приведена ниже:

      1 2 3 4 5 6 7 8 9 10 11 12

      function callbackExample(element) {     var result = (element.value.length > 0);         if(element.waitForValadation) {         // ... check here             $(element).attr('vnotice', 'This is callback example!');         alert('CallBack!');         element.waitForValadation = false;     }     return result; }

  • vparam — играет роль параметра для методов проверки. В случае использования как шаблона (при установке vmethod в pattern или optional) может принимать следующие значения:
    • string — произвольная непустая строка;
    • integer — целое число без знака;
    • float — вещественное число без знака (разделитель — точка);
    • url — ссылка, URL;
    • mail — адрес электронной почты;
    • или регулярное выражение для проверки поля на достоверность (например, для проверки корректности ввода даты «^[0-9]{2}-[0-9]{2}-[0-9]{4}$»).
  • vnotice — содержит сообщение, выдаваемое пользователю в случае неудачной проверки. Например, «Это поле должно содержать достоверный E-mail!»
• к тегам input type=»radio» и input type=»checkbox» добавляются те же атрибуты, но vparam представляет собой два целых числа, разделённых двоеточием. Первое число — минимальное значение выбранных элементов, второе — максимальное. Т.е. если у нас есть шесть кнопок с независимым выбором (checkbox), то значение vparam равное «3:4″ означает, что должно быть нажато минимум три и максимум четыре кнопки из шести. Для кнопок с зависимым выбором значения vparam, отличные от 0:1 не имеют смысла.
• к тегу select добавляются те же атрибуты, за исключением vparam. Проверка сводится к проверке на хотя бы одно выбранное значение.

Пример и исходный код

Для любителей попробовать рекомендую заглянуть на демо-страничку.
Исходный код доступен под лицензией GPLv2 — formcheck.zip. Библиотека тестировалась под Firefox и Opera.

Разумеется, в коде (да и в самой логике работы) могут присутствовать ошибки, потому буду рад любым замечаниям, дополнениям и пожеланиям.