Ajax-валидация форм с использованием jquery

Хочу привести пример простой реализации ajax-валидации, использую jquery.

Когда встала необходимость в реализации валидации форм, я счел наиболее рациональным решением использование ajax-валидации на стороне клиента, а затем окончательную валидацию на сервере, используя один и тот же код (серверной части на php).

Итак, правила валидации будут задаваться css-классами для большей гибкости и отравляться на сервер ajax-запросом, где будут соответственно
проверяться по этим правилам.


Пример разметки:

<form name="form" action="" method="post" enctype="multipart/form-data">
	<h1>Форма</h1>
	
	<div id="row-title" class="row">
		<label for="title">Название: </label><br />
		<input class="text validation noempty" type="text" name="title" id="title" value="" />
	</div>

	<div id="row-email" class="row">
		<label for="description">Адрес электронной почты: </label><br />
		<input class="text validation noempty email" type="text" name="email" id="email" value="" />
	</div>

	<div id="row-file" class="row">
		<input type="hidden" name="MAX_FILE_SIZE" value="10000000" /><br />
		<input class="file validation noempty" type="file" name="file" id="file" value="" />
	</div>

	<input class="submit" type="submit" name="submit" id="submit" value="Загрузить" />
	
</form>

Здесь css-классы noempty и mail в двух первых текстовых полях, — это правила валидации, а класс validation — это метка, указывающая на то, что поле должно быть проверено.

Оборачивать поля блоками необязательно, это зависит от реализации вывода сообщений на jquery, на свой вкус в общем :)

Следующим шагом подключаем к странице скрипты: jquery и validation, листинг которого ниже:

// ждем загрузки DOM
$(document).ready (function()
{
	// блокируем кнопку отправки до того момента, пока все поля не будут проверены
	$('.submit').prop('disabled', true);
	
	// elements содержит количество элементов для валидации
	var elements = $('.validation').length;
	
	// has содержит количество элементов успешно прощедших валидацию
	var has;
	
	// при изменении значения поля
	$('.validation').change(function() {

		// формируем массив для отправки на сервер, нас интересуют значение поля и css-классы
		//на сервере массив будет доступен в виде $_POST['validation']['name']['value'] и т.п. 
		var name = $(this).attr('name');
		var data = {};
		data['validation[' + name + '][value]'] = $(this).val();
		data['validation[' + name + '][class]'] = $(this).attr('class');

		// делаем ajax-запрос методом POST на текущий адрес, в ответ ждем данные HTML
		$.ajax({
			type: 'POST',
			url: '',
			dataType: 'html',
			data: data,
			// до выполнения запроса удаляем блок с предыдущими сообщениями
			beforeSend: function()
			{
				$('#row-' + name + ' div.msg').remove();
			},
			// в случае удачного выполнения добавляем блок с сообщением
			success: function(msg)
			{
				$('#row-' + name).append(msg);
			}
		});

		// проверяем, все ли поля прошли валидацию (признак - css-класс "ok" у блока сообщения) и разблокируем кнопку отправки на сервер
		has = $('.row:has(div.ok)').length + 1;
		if (has == elements)
		{
			$('.submit').prop('disabled', false);
		}
	});
});

Ну и пример обработки на сервере напоследок:

// функция валидации с определенными правилами, ее можно будет использовать и для валидации на сервере после отправки
function Validate ($fname ,$fvalue, $fclass)
{
	$classes = explode(' ', $fclass);
	$error = array('trigger' => FALSE, 'msg' => array());

	foreach ($classes as $class)
	{
		// проверяем в соответствии с правилами
		switch ($class)
		{
			case 'noempty':
				if (trim($fvalue) == '')
				{
					$error['trigger']   = TRUE;
					$error['msg'][]     = '<div class="error msg" style="color: red; font-weight: bold;">поле ' . $fname . ' не может быть пустым</div>';
				}
				break;
			case 'email':
				if (!filter_var($fvalue, FILTER_VALIDATE_EMAIL))
				{
					$error['trigger']   = TRUE;
					$error['msg'][]     = '<div class="error msg" style="color: red; font-weight: bold;">поле ' . $fname . ' не является почтой</div>';
				}
				break;
		}
	}

	// если ошибок не возникло, то значение поля считаеться допустимым
	if (!$error['trigger'])
	{
		$error['msg'][]    = '<div class="ok msg" style="color: green; font-weight: bold;">ок</div>';
	}
	
	return $error;
}

// непосредственно валидация
if (isset($_POST['validation']))
{
	foreach ($_POST['validation'] as $field_name => $field)
	{
		$validate = Validate($field_name, $field['value'], $field['class']);
		foreach ($validate['msg'] as $msg)
		{
			// выводим ответ
			echo $msg;
		}
	}
	// прекращаем выполнение
	exit();
}

Спасибо за внимание. Предложения, пожелания, и самое главное, советы приветствуются :)