jQuery Ajax отправка формы Часть 2

Узнав, какие события есть при отправке формы, добавим простейшую валидацию и очистку формы после отправки.

Как добавить простую валидацию формы на jQuery

Первая часть статьи про события успеха и ошибки рекомендуется к прочтению. Теперь приступим к изучению кода.

HTML формы:

<form class="js-form" action="ajax.php" method="POST">
	<label class="popup-label">
		<span class="popup-text">Ваше имя:</span>
		<input class="popup-input inp-req" type="text" name="name" value="" required="">
	</label>
	<label class="popup-label">
		<span class="popup-text">Ваш телефон:</span>
		<input class="popup-input inp-req" type="tel" name="phone" value="" required="">
	</label>
	<input type="hidden" name="url" value="http://site.ru/">
	<input type="hidden" name="target" value="Заказать праздник" id="target-inp">
	<div class="popup-desc">Заполните форму и оператор перезвонит Вам в ближайшее время.</div>
	<button class="btn-holiday js-submit" type="submit">Отправить</button>
</form>

Также, добавляем в CSS стиль для ошибки:

.error {
	border-color: red;
}

И переходим плавно к jQuery:

(function($){

	// form submit ajax
	$('.js-submit').on('click', function(){
		var $this = $(this),
			$form = $this.closest('.js-form'),
			$errorText = 'Вы не правильно заполнили поля!',
			$successText = 'Спасибо за Вашу заявку. Оператор перезвонит в ближайшее время.',
			$error = false;

		$form.find('.inp-req').each(function(){
			var $thisVal = $(this).val();
			if ($thisVal == false) {
				$error = true;
				$(this).addClass('error');
			} else {
				$(this).removeClass('error');
			}
		});
		if ($error == true) {
			alert($errorText);
			return false;
		}

		$.ajax({
			url: $form.attr('action'),
			type: 'post',
			cache: false,
			data: $form.serialize(),
		}).done(function(data){
			if (data == 'error') {
				alert($errorText);
			} else {
				$form[0].reset();
				$('.error').removeClass('error');
				alert($successText);
			}
			//console.log(data);
		}).error(function(){
			console.log('There was an error');
		});

		return false;
	});

})(jQuery);

В чем плюс данного кода? Он универсален и можно повесить для нескольких форм сразу, ведь обработчик берется из action. Для обязательного класса служит inp-req. В качестве ошибок выводятся стандартные алерты браузера, но вы конечно можете их заменить на что-то покрасивее на свое усмотрение 🙂 .

Обратите внимание на строчку
$form[0].reset();
После успешной отправки сбрасываются все значения данной формы.

Ну и конечно стоит сказать про валидацию – ее здесь почти нет :). Проверка на пустое поле (false) – это никуда не годится, и для формы нужно проверять хотя бы кол-во символов, для телефона числа. Также можно добавить скрипт на “маску” для телефона, и валидацию емейла при помощи регулярного выражения. И не забывайте про защиту от спама, которую нужно делать не только на клиентской стороне но и на серверной.

А что вы используете во всех своих формах? Поделитесь об этом в комментариях с остальными, спасибо за внимание 😉 .