Валидация формы - наглядный вид
Веб-формы являются неотъемлемой частью любого сайта. Благодаря им, пользователь оставляет свои данные, мнение, комментарии и любую личную информацию.
Но всё же веб-формы всегда являются "тонкой гранью" в "общении" пользователя и сайта. И не стоит забывать, что чем проще посетителю сайта пользоваться веб-формой, тем качественнее и полнее будет оставленная им информация. Сейчас тема статьи о том, как пользователю, просто и наглядно объяснить, что он ввёл ошибочные данные или не ввёл их вообще в обязательные поля.
Вообще валидация веб-формы бывает двух типов:
- на клиенте, т.е. средствами браузера;
- на сервере.
Нас в данном случае интересует валидация на клиенте.
Начнём сразу с примера:
Удобный подход к решению поставленной задачи!
Код примера показанного выше:
<script type="text/javascript" src="/files/jquery.validateform/jquery.validateform.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/files/jquery.validateform/style.css" />
<form id="idFeedbackForm" onsubmit="return false;">
Поля отмеченные * - обязательные для заполнения.
Ф.И.О
<input type="text" name="fio" style="width:400px;" value="">
<small>Пример: <a href="javascript: void(0)" onclick="$('#idFeedbackForm input[name=\'fio\']').attr('value', $(this).html());">Адимнов Админ Админович</a></small>
E-mail *
<input type="text" name="email" style="width:400px;" value="">
<small>Пример: <a href="javascript: void(0)" onclick="$('#idFeedbackForm input[name=\'email\']').attr('value', $(this).html());">info@webumka.ru</a></small>
Телефон *
<input type="text" name="phone" style="width:400px;" value="">
<small>Пример: <a href="javascript: void(0)" onclick="$('#idFeedbackForm input[name=\'phone\']').attr('value', $(this).html());">729-68-45</a></small>
Текст *
<textarea name="descr" style="width:400px; height:200px;"></textarea>
<input type="submit" name="Submit" value="Отправить">
</form>
<script>
$(function () {
$('#idFeedbackForm').validateform([
{
'field': 'input',
'name': 'fio',
'alertClass': 'alert',
'rule': /([a-zа-я\-]){0}/i
},
{
'field': 'input',
'name': 'email',
'alertClass': 'alert',
'rule': /^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i
},
{
'field': 'input',
'name': 'phone',
'alertClass': 'alert',
'rule': /([0-9\-\(\)]){1}/i
},
{
'field': 'textarea',
'name': 'descr',
'alertClass': 'alert',
'rule': /([a-zа-я\-\.\,\\\/\_\@\\(\)\+\=\%\&\!]){10}/i
}
], 10);
});
</script>
Как это работает? Очень просто!
Вам нужно следующее:
- Подключить файл JQuery плагина и CSS-файл стилей оформления веб-формы;
- Назначить веб-форме исполнение плагина.
А теперь по порядку.
Подключить файл JQuery плагина и CSS-файл стилей оформления веб-формы.
Ту всё просто:
<script type="text/javascript" src="/files/jquery.validateform/jquery.validateform.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/files/jquery.validateform/style.css" />
Стоит обратить внимание на CSS-файл, в нём имеются два класса отвечающие за оформление полей веб-формы, если в ней имеются ошибки, это:
- #idFeedbackForm textarea.alert
- #idFeedbackForm input.alert
Назначить веб-форме исполнение плагина.
Начнём с разбора примера:
...
<form id="idFeedbackForm" onsubmit="return false;">
Поля отмеченные * - обязательные для заполнения.
Ф.И.О
<input type="text" name="fio" style="width:400px;" value="">
<small>Пример: <a href="javascript: void(0)" onclick="$('#idFeedbackForm input[name=\'fio\']').attr('value', $(this).html());">Адимнов Админ Админович</a></small>
E-mail *
<input type="text" name="email" style="width:400px;" value="">
<small>Пример: <a href="javascript: void(0)" onclick="$('#idFeedbackForm input[name=\'email\']').attr('value', $(this).html());">info@webumka.ru</a></small>
...
</form>
<script>
$(function () {
$('#idFeedbackForm').validateform([
{
'field': 'input',
'name': 'fio',
'alertClass': 'alert',
'rule': /([a-zа-я\-]){0}/i
},
{
'field': 'input',
'name': 'email',
'alertClass': 'alert',
'rule': /^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i
},
...
], 10);
});
</script>
...
У нас имеется веб-форма с атрибутом "id", имеются поля, каждый из которых с уникальным значением атрибута "name" и JavaScript - подключающий к веб-форме JQuery плагин.
Сначала нам нужно назначить веб-форме JQuery плагин:
...
<script>
$(function () {
$('#idFeedbackForm').validateform([
...
], 10);
});
</script>
...
Плагин имеет следующие параметры - jQuery.fn.validateform = function (arrFields, size).
Опис ание параметров:
- arrFields - список из ассоциированых макссив описывающих каждое поле веб-формы. Должен иметь следующие ключи:
- field - название тега поля веб-формы. Может быть: input, textarea, select, button;
- name - название поля веб-формы, значение атрибута "name";
- alertClass - название класса стиля, отвенчающего за состояние поля в ошибке;
- rule - правило валидации значения поля веб-формы, является регулярным выражением.
- size - размер рассеивания рамки от краёв ошибочного поля.
Вот и всё!
Весь код можно скачать тут.
