Валидация формы - наглядный вид

Веб-формы являются неотъемлемой частью любого сайта. Благодаря им, пользователь оставляет свои данные, мнение, комментарии и любую личную информацию.

Но всё же веб-формы всегда являются "тонкой гранью" в "общении" пользователя и сайта. И не стоит забывать, что чем проще посетителю сайта пользоваться веб-формой, тем качественнее и полнее будет оставленная им информация. Сейчас тема статьи о том, как пользователю, просто и наглядно объяснить, что он ввёл ошибочные данные или не ввёл их вообще в обязательные поля.

Вообще валидация веб-формы бывает двух типов:

• на клиенте, т.е. средствами браузера;
• на сервере.

Нас в данном случае интересует валидация на клиенте.

Начнём сразу с примера:

Удобный подход к решению поставленной задачи!
Код примера показанного выше:

{codecitation style="brush: html;"}

Поля отмеченные * - обязательные для заполнения.

Ф.И.О

Пример: Адимнов Админ Админович

E-mail *

Пример: info@webumka.ru

Телефон *

Пример: 729-68-45

Текст *

{/codecitation}

Как это работает? Очень просто!
Вам нужно следующее:

• Подключить файл JQuery плагина и CSS-файл стилей оформления веб-формы;
• Назначить веб-форме исполнение плагина.

А теперь по порядку.

Подключить файл JQuery плагина и CSS-файл стилей оформления веб-формы.

Ту всё просто:

{codecitation style="brush: html;"} {/codecitation}

Стоит обратить внимание на CSS-файл, в нём имеются два класса отвечающие за оформление полей веб-формы, если в ней имеются ошибки, это:

• #idFeedbackForm textarea.alert
• #idFeedbackForm input.alert

Назначить веб-форме исполнение плагина.

Начнём с разбора примера:

{codecitation style="brush: html;"} ...

Поля отмеченные * - обязательные для заполнения.

Ф.И.О

Пример: Адимнов Админ Админович

E-mail *

Пример: info@webumka.ru

...

... {/codecitation}

У нас имеется веб-форма с атрибутом "id", имеются поля, каждый из которых с уникальным значением атрибута "name" и JavaScript - подключающий к веб-форме JQuery плагин.

Сначала нам нужно назначить веб-форме JQuery плагин:

{codecitation style="brush: html;"} ... ... {/codecitation}

Плагин имеет следующие параметры - jQuery.fn.validateform = function (arrFields, size).
Опис ание параметров:

• arrFields - список из ассоциированых макссив описывающих каждое поле веб-формы. Должен иметь следующие ключи:
  • field - название тега поля веб-формы. Может быть: input, textarea, select, button;
  • name - название поля веб-формы, значение атрибута "name";
  • alertClass - название класса стиля, отвенчающего за состояние поля в ошибке;
  • rule - правило валидации значения поля веб-формы, является регулярным выражением.
• size - размер рассеивания рамки от краёв ошибочного поля.

Вот и всё!

Весь код можно скачать тут.