Создание привлекательной формы. Часть 2

Создание привлекательной формы

От автора: в предыдущем уроке мы с Вами создали форму для отзывов и, на мой неприхотливый взгляд, придали ей довольно симпатичное стилевое оформление. Но создание формы — это только начало. Поскольку наша форма имеет некоторое количество обязательных к заполнению полей, то неплохо было бы доверить клиенту (браузеру) проверку заполнения всех обязательных полей перед отправкой формы.

Этот шаг, конечно же, никоим образом не избавляет нас от необходимости проверки формы на сервере, но практически всегда гарантирует заполненность всех полей, тем самым помогая избежать лишнего трафика и снижая нагрузку на сервер.

Итак, приступим к написанию клиентского скрипта.

План урока:

    1. Работа с регулярными выражениями в редакторах.

    2. Написание клиентского скрипта.

Детали учебника

Тема: CSS, jQuery

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 00:55:36

Размер архива: 100 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Прежде всего, создадим в нашем проекте каталог js, в котором будут находиться клиентские скрипты. Поместим в этот каталог библиотеку jQuery и создадим в ней файл form.js со следующим содержимым:

$(document).ready(function(){
	
}

В файле form.js, собственно, и будет находиться наш скрипт, проверяющий заполнение формы. Оба скрипта подключим к файлу с формой:

<script src="js/jquery.js"></script>
<script src="js/form.js"></script>

Если в форме всего несколько полей, то проверить заполнены ли обязательные, можно попросту обратившись к каждому конкретному полю. Но что делать, если полей в форме очень много? И очень много обязательных полей? В таком случае довольно трудоемким процессом будет проверка каждого конкретного поля в отдельности.

А что если наша форма предполагает изменение количества полей? В таком случае придется лезть в код скрипта и производить изменения и в нем.

Согласитесь, хотелось бы как-то автоматизировать эти процессы. Давайте попробуем написать такой скрипт, который бы позволял нам в считанные секунды изменять количество обязательных полей, практически не требуя изменения кода.

В файле form.js создадим массив с именами обязательных полей:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];
}

Как Вы, вероятно, уже догадались, в дальнейшем при изменениях в форме нам достаточно будет изменить только содержимое этого массива. Если в форме появились дополнительные обязательные поля — мы их включим в этот массив, если количество полей уменьшилось — мы удалим ненужные элементы из массива… согласитесь — просто и удобно.

Теперь воспользуемся методом submit(), чтобы отследить событие отправки формы:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){

	}
}

Поскольку мы хотим максимально автоматизировать процесс, то при событии submit мы должны будем взять все поля формы и проверить их перед отправкой. При этом мы должны учитывать заполненность только полей из массива fields.

Давайте продумаем алгоритм действий. Мы можем создать переменную, скажем, с нулевым значением, которая будет своеобразным флагом заполненности обязательных полей. Далее в цикле мы проверим все обязательные поля на заполнение. Если при этом выяснится, что какое-то из этих полей было не заполнено, то мы просто изменим значение флага с нуля на, скажем, единицу. После окончания цикла достаточно проверить значение флага, если оно осталось нулевым — значит, все поля были заполнены и можно разрешать отправку формы, если же значение равно единице – значит, какое-то из полей было не заполнено, и мы запретим отправку формы.

Также, кроме флага заполнения полей, объявим еще флаг подтверждения, который будет проверять чекбокс формы.

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){
		var error = 0; // флаг заполнения обязательных полей
		var errorCheck = 0; // флаг подтверждения
	}
}

Теперь организуем цикл по всем полям формы:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){
		var error = 0; // флаг заполнения обязательных полей
		var errorCheck = 0; // флаг подтверждения

		$(".form").find(":input").each(function(){ // проверяем каждое поле формы

		}
	}
}

Но все поля формы нам и не нужны, нам нужны только те из них, которые присутствуют в массиве fields. Поэтому при проверке каждого конкретного поля формы проверим нет ли его в массиве обязательных полей. Сделать это можно в цикле for:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){
		var error = 0; // флаг заполнения обязательных полей
		var errorCheck = 0; // флаг подтверждения

		$(".form").find(":input").each(function(){ // проверяем каждое поле формы
			for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей
				if($(this).attr("name") == fields){ // если проверяемое поле есть в списке обязательных

				}
			}
		}
	}
}

Здесь мы сравниваем атрибут name проверяемого поля с каждым из элементов массива fields. Если совпадение будет найдено — значит, мы работаем с обязательным полем. А коль это поле обязательно к заполнению, то давайте возьмем значение этого поля и проверим его. Если значение вернет ИСТИНУ — значит, в поле что-то есть, иначе — поле пусто. При этом не забываем обрезать концевые пробелы, поскольку пробелы — это также символы, но просто пробелы нам не нужны:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){
		var error = 0; // флаг заполнения обязательных полей
		var errorCheck = 0; // флаг подтверждения

		$(".form").find(":input").each(function(){ // проверяем каждое поле формы
			for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей
				if($(this).attr("name") == fields){ // если проверяемое поле есть в списке обязательных
					if(!$.trim( $(this).val() ) ){ // если поле не заполнено

					}
				}
			}
		}
	}
}

Таким образом, если последнее условие не выполняется — значит, поле не заполнено. Что же делать в этом случае? Мы уже это решили для себя — изменяем значение флага error. Также нужно будет как-то выделить незаполненное поле из списка других, поэтому, кроме изменения флага, также добавим текущему полю класс, который затем опишем в стилях:

$(document).ready(function(){
	var fields = ["lastname", "firstname", "email", "comment"];

	$(".form").submit(function(){
		var error = 0; // флаг заполнения обязательных полей
		var errorCheck = 0; // флаг подтверждения

		$(".form").find(":input").each(function(){ // проверяем каждое поле формы
			for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей
				if($(this).attr("name") == fields){ // если проверяемое поле есть в списке обязательных
					if(!$.trim( $(this).val() ) ){ // если поле не заполнено
						$(this).addClass("formError");
						error = 1;
					}else{
						// если заполнено - убираем красную рамку
						$(this).removeClass("formError");
					}
				}
			}
		}
	}
}

Здесь также мы добавили блок else, который будет выполняться в том случае, если поле заполнено. В этом блоке кода мы попросту удаляем возможный для поля класс formError, для того, чтобы убрать подсветку поля, если она была до этого.

В файл стилей добавим правило для класса formError:

.formError{
	border: 1px solid red !important;
}

C проверкой обязательных полей мы закончили. Сейчас можете после цикла each указать запрет отправки формы:

return false;

и насладиться промежуточным результатом. Если обязательные поля не заполнены — они будут подсвечены красной рамкой:

У нас есть еще одно своеобразное отдельное проверяемое поле — это чекбокс. Для него мы даже выделили отдельный флаг. После проверки обязательных полей давайте получим значение чекбокса:

// получаем значение чекбокса
var check = $("#confirm").prop("checked");

Теперь в переменной check будет значение TRUE (если чекбокс был отмечен) либо FALSE (если не был отмечен).

Исходя из двух возможных значений, напишем условие:

// получаем значение чекбокса
var check = $("#confirm").prop("checked");
if(!check){
	// если не отмечен
}else{
	// если отмечен
}

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

// получаем значение чекбокса
var check = $("#confirm").prop("checked");
if(!check){
	// если не отмечен
	$("#confirm").next().addClass("formTextRed");
	errorCheck = 1;
}else{
	// если отмечен
	$("#confirm").next().removeClass("formTextRed");
}

В файле стилей добавим приоритетности правилу formTextRed:

.formTextRed{
	color: red !important;
}

Собственно, наш скрипт практически готов. Осталось проверить не изменилось ли значения флагов. Если не изменились — вернем ИСТИНУ для метода submit(), т.е. разрешим отправку формы, иначе — вернем ЛОЖЬ, отменяя отправку:

if(error == 0 && errorCheck == 0){
	// если ошибок нет - отправляем данные
	return true;
}else{
	var err_text = "";
	if(error) err_text += "<p>Не все обязательные поля заполнены! Заполните подсвеченные поля.</p>";
	if(errorCheck) err_text += "<p>Вы не подтвердили согласие на публикацию!</p>";
	$("#messenger").hide().fadeIn(500).html(err_text);
	return false;
}

В блоке кода else в переменную err_text мы складываем сообщения об ошибках. Эти сообщения будут выводиться в элементе с идентификатором messenger, поэтому давайте создадим блок с таким идентификатором на странице, например, сразу под формой:

<div id="messenger"></div>

И опишем стилевые правила для этого элемента:

#messenger{
	width: 550px;
	border: gray dashed 1px;
	padding: 5px;
	background: #FFEDED;
	color: #7F5354;
	display:none;
}

Вот и все. Теперь мы можем протестировать работу скрипта. Если мы не заполним обязательные поля и не подтвердим согласие на публикацию — форма отправляться не будет:

Если же все в порядке, то данные отправляются на сервер. В следующем уроке мы будем писать уже серверный скрипт, проверяющий корректность данных формы.

Ну а на этом у меня все. Удачи Вам и до новых встреч!

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (21)

  1. Марат

    Не нашел цикл each , чтобы указать запрет отправки формы

    • Андрей Кудлай

      Опять же, комментарий не совсем понятен. Скачайте исходники к уроку и сравните написанный Вами код с кодом исходников.

  2. Ирина

    Добрый день. А если у меня уже есть такая форма на сайте, но необходимо, чтобы она еще и публиковалась в нужной рубрике, на определенной странице сайта.В виде анкет пользователей,например. Как это сделать?

    • Андрей Кудлай

      Добрый день.
      Полагаю, что ее необходимо опубликовать на нужной странице точно также, как уже это сделано на другой странице.

      • Ирина

        Извините, я не это имела ввиду. Я имела ввиду публикацию заполненной пользователем анкеты.То есть то, что прилетает мне на е-мэил (уже в заполненном виде), должно сразу публиковаться в нужном месте на сайте.

        • Андрей Кудлай

          Для этого нужно использовать любое хранилище информации, куда и будут сохранены данные из формы. Чаще всего это БД, могут быть текстовые файлы. Заполненные данные сохраняются в БД, а затем просто выводятся в нужном формате из БД.
          Чаще всего эту задачу решают в связке PHP + MySQL

          • Ирина

            Это мне понятно.Интересует, как реализовать такую возможность на сайте? Я так понимаю, это будет что-то типа гостевой книги…Но меня не интересуют гостевые книги в тех вариантах плагинов и скриптов, которые я находила для Вордпресса.У Вас будет такой урок ?

          • Андрей Кудлай

            Да у нас масса уроков на сайте уже опубликована по реализации подобного функционала. В частности, есть и по созданию гостевой книги… принцип у все этих вещей один и тот же — получаем информацию, сохраняем в БД, выводим из БД.

  3. Александр

    Здравствуйте!
    Спасибо большое за ваши уроки, они очень помогают начинающим. Очень понравилась Ваша форма, а особенно ее обработка. Но возникла такая проблема. На Денвер все работает идеально, только загружаю на сервер, не работает клиентская часть, то есть часть, которая связана с js. Не заполнены поля, нажимаю на кнопку «Отправить» js не останавливает выполнение скрипта. Подсвечиваются не заполненные поля, текстовое предупреждение не появляется и потом автоматически начинает работу серверный скрипт. Он то и останавливает работу. Появляется сообщение о незаполненных полях. Если поля заполнены, как надо скрипт отрабатывает нормально (письма на Email) отправляются. По всей видимости, проблема в хостинге. Что служба поддержки хостинга должна проверить??????

    • Андрей Кудлай

      Здравствуйте, Александр.
      Нет, сервер хостера здесь вряд ли виноват, поскольку JS — это клиентский язык программирования, который выполняется браузером, а не сервером.
      Скорее всего, проблема в путях, подключающих скрипты. Очень легко это проверяется через Firebug. Проверьте корректность путей и, если все же не получится решить проблему, создайте тему на нашем форуме, дайте там ссылку на сайт и мы обязательно постараемся помочь.

  4. Ирина

    Хотелось бы увидеть ответ на мой комментарий от
    29.05.2013 в 17:41

  5. Elena

    Спасибо, как всегда все понятно.

  6. Defman

    Сегодня я,не поняв принцип работы вашего скрипта написал свой скрипт с именными функциями.
    Выглядит вот так:
    function speccl(id){
    var pattern = /^[а-я]+$/i
    var obj = $(id)
    obj.blur(function(){
    if(obj.val() != ») {
    if(obj.val().search(pattern) == 0) {
    obj.addClass(‘ok’).removeClass(‘error’)
    }else {
    obj.addClass(‘error’).removeClass(‘ok’)
    }
    }else {
    obj.addClass(‘error’).removeClass(‘ok’)
    }
    });
    };
    Остается добавить это в input с помощью onfocus=»speccl(id_input)».Впервые пришлось работать с таким,но это ведь работает :)

  7. Вероника

    Здравствуйте, Андрей! Большое спасибо Вам за Ваш труд! Уроки отличные!
    И у меня вопрос. Почему-то при обновлении страницы браузер снова отправляет данные из формы. У Вас же это не происходит. В чем тут подвох? Спасибо.

    • Андрей Кудлай

      Здравствуйте, Вероника!
      Скорее всего, не перезапрашивается страница и данные остаются в массиве POST. Для более конкретного ответа нужно посмотреть и поработать с кодом.

  8. Алексей

    Здравствуйте, огромное спасибо за уроки, очень понятные и информативные.
    Задался вопросом — как можно реализовать момент — чтоб в сообщении о незаполненных полях(в переменной err_text) указывалось — какие именно поля необходимо заполнить.

    • Андрей Кудлай

      Здравствуйте, Алексей.
      Да, конечно возможно. Смотрите следующие уроки цикла, там показана реализация этого момента.

  9. timur7879@gmail.com

    Здравствуйте, почему скачивая исходники браузер блокирует и сообщат о вирусе. Проверьте пожалуйста.

    • Андрей Кудлай

      Здравствуйте.
      Проверил — никаких проблем. Антивирусы: Касперский и Аваст. Также никаких проблем не показал и сервис virustotal — скрин. И никто из сотен пользователей, скачавших исходники. Вы первый.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree