info@webumka.ru, +7 (903) 729-68-45

Почему мы?

Ориентация

мы всегда лицом к клиенту

Оперативность

мы дорожим временем наших клиентов

Инновации

мы даём клиентам нечто большее

Профессионализм

наши знания и опыт выигрыш наших клиентов

«Да!»

так говорит каждый наш клиент

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

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

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

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

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

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

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

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

Ф.И.О

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

E-mail *

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

Телефон *

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

Текст *

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

<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 - размер рассеивания рамки от краёв ошибочного поля.

Вот и всё!

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