Ajax-форма. Пример формы с валидацией полей на стороне сервера

В этой статье я хочу показать пример работы с ajax. В качестве примера рассмотрим обычную форма с четырьмя полями — имя, e-mail, пароль и подтверждение пароля. После заполнения полей, с помощью ajax`a отправим данные на сервер и проверим их на корректность: чтобы поля были обязательно заполнены, а также поля с паролем и подтверждением пароля имели одинаковые значения.
Для работы формы необходимо подключить библиотеку jQuery. Приступим к написанию формы. Для начала составим html форму и напишем пару стилей для нее:

<style>
.label_desc{
	display: block;
}
.error{
	display: none;
}
.error_input{
	border: 2px solid #FF0000; 
}
</style>

<form action="ajax_index.php" id="form_test" method="post">

	<label class="label_desc">Name:</label>
	<input type="text" id="name_user"/>
	<label id="name_user_error" class="error"></label>
	<br/>
	
	<label class="label_desc">E-mail:</label>
	<input type="text" id="email_user" /> 
	<label id="email_user_error" class="error"></label>
	<br/>
	
	<label class="label_desc">Password:</label>
	<input type="password" id="password_user" />
	<label id="password_user_error" class="error"></label>
	<br/>
	
	<label class="label_desc">Repeat Password:</label>
	<input type="password" id="password_2_user" />
	<label id="password_2_user_error" class="error"></label>
	<br/>
	
	<br/>	
	<input type="submit" value="Send" id="send_data" />
	
</form>

Теперь напишем серверный скрипт — ajax_index.php, он будет использоваться для обработки данных. Вот его код:

// массив для хранения ошибок
$errorContainer = array();
// полученные данные
$arrayFields = array(
	'name_user' => $_POST['name_user'],
	'email_user' => $_POST['email_user'],
	'password_user' => $_POST['password_user'],
	'password_2_user' => $_POST['password_2_user']
);

// проверка всех полей на пустоту
foreach($arrayFields as $fieldName => $oneField){
	if($oneField == '' || !isset($oneField)){
		$errorContainer[$fieldName] = 'Поле обязательно для заполнения';
	}
}

// сравнение введенных паролей
if($arrayFields['password_user'] != $arrayFields['password_2_user'])
	$errorContainer['password_2_user'] = 'Пароли не совпадают';

// делаем ответ для клиента
if(empty($errorContainer)){
	// если нет ошибок сообщаем об успехе
	echo json_encode(array('result' => 'success'));
}else{
	// если есть ошибки то отправляем
	echo json_encode(array('result' => 'error', 'text_error' => $errorContainer));
}

И теперь осталось только написать javaScript. Он будет выглядеть вот так:

$(document).ready(function() {
	$('#form_test').submit(function(){
		// убираем класс ошибок с инпутов
		$('input').each(function(){
			$(this).removeClass('error_input');
		});
		// прячем текст ошибок
		$('.error').hide();
		
		// получение данных из полей
		var name_user = $('#name_user').val();
		var email_user = $('#email_user').val();
		var password_user = $('#password_user').val();
		var password_2_user = $('#password_2_user').val();
		
		$.ajax({
			// метод отправки 
			type: "POST",
			// путь до скрипта-обработчика
			url: "/ajax_index.php",
			// какие данные будут переданы
			data: {
				'name_user': name_user, 
				'email_user': email_user,
				'password_user': password_user,
				'password_2_user': password_2_user
			},
			// тип передачи данных
			dataType: "json",
			// действие, при ответе с сервера
			success: function(data){
				// в случае, когда пришло success. Отработало без ошибок
				if(data.result == 'success'){	
					alert('форма корректно заполнена');
				// в случае ошибок в форме
				}else{
					// перебираем массив с ошибками
					for(var errorField in data.text_error){
						// выводим текст ошибок 
						$('#'+errorField+'_error').html(data.text_error[errorField]);
						// показываем текст ошибок
						$('#'+errorField+'_error').show();
						// обводим инпуты красным цветом
						$('#'+errorField).addClass('error_input');						
					}
				}
			}
		});
		// останавливаем сабмит, чтоб не перезагружалась страница
		return false;
	});
});

Вот и все. Ajax-форма с валидацией готова.