slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна3 / 5
 
Автор: Администратор
Просмотров: 6422
Теги: javascript, form, jQuery, ajax, required

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

Ранее, в статье Ajax-форма обратной связи на jQuery мы уже рассмотрели создание формы обратной связи средствами Ajax(без перезагрузки страницы). Но как можно увидеть в том демо-примере, отправка сообщения идет даже в том случае, если поля не заполнены. Это не логично, согласитесь?

Ниже мы напишем простой скрипт, который будет проверять заполнены ли обязательные поля(отмеченные required). В случае если они заполнены - успешно отправлять сообщение, в противном случае - выдавать сообщение об ошибке. Стоит так же отметить, что данный скрипт будет работать только для единственной формы на странице, если вы хотите проверять разные формы на одной странице, код прийдется немного видоизменить.

Мы не будем изобретать велосипед и возьмем результаты статьи, указанной выше. Скачать их вы можете тут:

download

После чего мы немного подкорректируем структуру формы и js-код.

Добавим в нашу форму поле для ввода текста, а так же полю с вводом E-mail укажем обязательный порядок заполнения, как и полю с текстом. Так как у нас перед отправкой сообщения будет проверяться заполнение обязательных полей, то и будет новая функция в ajax.js, которая будет возвращать true/false, поэтому в обработчике onClick, так же поменяем введённый код. Вот результат наших изменений:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/ajax.js"></script>
</head>
<body>
	<form action="send.php" method="GET" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail" required><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<textarea name="text" placeholder="Пользовательский текст" required></textarea><br>
		<input type="button" value="Нажмите, чтобы отправить письмо" onClick="if (CheckForm()) SendPost();">
	</form>
</body>
</html>

Так же добавляем функцию в ajax.js и теперь этот файл будет выглядеть так:

/* Ajax-запрос */

function SendPost() // Наша функция, которая будет осуществлять ajax-отправку
{
	jQuery.ajax({	// Начала конструкции для работы с Ajax через jQuery
			type: "GET", // Метод, которым получаем данные из формы
			url: "../19/send.php", // Обработчик формы. 
			data: jQuery("#form").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
			success: function(html) {	// функция выполняемая при успешном отправлении данных
				jQuery("body").empty();	// очищаем тело документа
				jQuery("body").append("<h2><center>Ваше сообщение успешно отправлено.</center></h2>"); // вставляем сообщение об успехе
			}
	});
}

function CheckForm() {
	var requiredField = $("#form").children("[required=required]"); // Получаем все элементы, которые указаны как обязательные к заполнению
	for (var i = 0; i < requiredField.length; i++) { // Обходим все полученные элементы
		if ($(requiredField[i]).val() == '') { // Если хотя бы одно из обязательных полей не заполнено
			alert("Заполните все обязательные поля"); // Выводим сообщение об ошибке
			return false; // Возвращаем false
		}
	}
	return true; // Если все обязательные поля заполнены - возвращаем true
}

Обе функции снабжены комментариями к каждой из строчек кода.

Результат проделанной работы вы сможете наблюдать на Демо-странице (Напоминаю, чтобы проверить работоспособность формы, введи в поле E-mail ваш, на который вы хотите получить письмо):

demo

А получившиеся исходники примера можете скачать по ссылке ниже:

download

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.80
  • intuit89
    6.20
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

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

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

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

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.