Выпекаем сайты, находим покупателей

Jquery Ajax отправка и валидация формы

Jquery Ajax

В этой статье Вы узнаете, как отправлять данные из формы методом post, с помощью jquery, используя плагин jquery.form. Также я покажу, как провести предварительную проверку данных, с помощью плагина jquery.validate. Ваши пользователи будут довольны, больше не будет лишней перезагрузки страниц.

Для работы понадобится библиотека Jquery, плагины Jquery.form и Jquery.validate. Подключите их между тегами <head> и </head>.

Готовый пример будет выглядить так


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
	$('document').ready(function(){
		$('#form').validate(
		{	
			//Правила
			rules:{
				"title":{ required:true, maxlength:40 },
				"text":{ required:true }
			},
			//Текста предупреждений
			messages:{
				"title":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>", 
maxlength: "<br/><span style='color:red;'>Максимальное кол-во символов 40 единиц!</a>" },
				"text":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>" }
			},
			//Обработчик и отправка данных
			submitHandler: function(form){
				$(form).ajaxSubmit({
					target: '#result', 
					success: function() { 
						$('#FormBox').slideUp('fast'); 
					} 
				}); 
			}


		})
	});
</script>


<div id="result"></div>
<div id="FormBox"> 
	<form id="form" action="php-obrabotka.php" method="post">
		<p><label>Заголовок</label><br/>
			<input type="text" name="title" /></p>
		<p><label>Текст</label><br/>
			<textarea name="text"></textarea></p>
		<p><input type="submit" value=" Отправить " /></p>
	</form>
</div>

Разбор примера

В данном примере, я завернул инициализацию отправки "$(form).ajaxSubmit()", в функцию валидации(проверки) "$('#form').validate()" формы. Если проверка будет пройдена, то форма отправится.

1. Для начала нам нужно настроить "rules:{...}" (правила), для этого нужно использовать имена элементов формы, т.е. содержимое атрибута name у input, textarea и т.д., а также методы валидации. Как видно в примере, для элемента "title", установлены методы "required" и "maxlength", первый обязывает использовать элемент, а второй указывает на максимальное количество введённых символов.

2. Далее смотрим на messages:{...} (текста предупреждений). На каждый элемент формы, к каждому методу валидации, можно настроить сообщение указывающее на причину провала проверки. К примеру, на элементе "text", на метод проверки "maxlength", установлено сообщение "Максимальное кол-во символов 40 едениц!". Это сообщение появится рядом с элементом, при неудачной проверке отправляемых данных.

3. В примере есть div с id равным "FormBox", это нужно для того, чтобы при удачной отправке данных скрыть содержимое div, а точнее форму отправки. Тег div с id равным "result", напротив, покажет результат после удачной отправки формы. Результат будет отображением вывода из файла "php-obrabotka.php", которому мы пошлём прошедшие валидацию данные, указав название файла в атрбибуте "action", тега "form".

4. Файл "php-obrabotka.php", получит данные методом POST, после чего их можно обработать, записать в базу и вывести сообщение об удачном действии пользователя.

Методы валидации

Плагин Jquery.validate, имеет несколько методов проверки, вот некоторые из них:
required - обязательно для заполнения
minlength - максимальное кол-во введённых символов
maxlength - минимальное кол-во введённых символов
email - проверка введённого email
url - проверка введённого веб-адреса
number - поле только для цифр

Это лишь малая часть методов, полный список смотрите на оффициальном сайте jquery, на странице плагина.

Комментарии и отзывы к материалу

26.04.2013

вадим пишет:
коммент

17.07.2013

Володя пишет:
отличная статья

22.07.2013

Валентина пишет:
Что означает "слово с картинки", как эту картинку расшифровывать?3

22.07.2013

Сергей пишет:
Хорошая статья

26.07.2013

Guest пишет:
Исправь ошибку во фразе "В данном примИре"

27.07.2013

Григорий (MakeFuture) пишет:
Спасибо, исправил!

15.10.2013

Re пишет:
Eeeeeeeeeeeee

19.12.2013

это я пишет:
Я проверил комментарий

13.03.2014

Дмитрий пишет:
Проверка связи!

15.05.2014

Тарлан пишет:
А как проверить с регулярными выражениями? Где pattern

17.09.2014

Suck_mY_dick пишет:
Оооочень хорошоя стать-я

24.09.2014

Игорь пишет:
всё бы хорошо,только вот ни одна форма не отправляется))

23.01.2015

Георгий пишет:
Не правильно теги закрываются, </a> вместо </span>:
"title":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>",
maxlength: "<br/><span style='color:red;'>Максимальное кол-во символов 40 единиц!</a>" },
"text":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>" }

29.01.2015

Tutanhamon пишет:
Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html

10.07.2015

Андрей пишет:
Вода водой

03.09.2015

Дмитрий Гаврилов пишет:
Респект автору!!!!!!!!!!!!!!

Отправить комментарий

Как зовут?

Сообщение