В этой статье мы рассмотрим создание скрипта, который будет проверять обязательные поля формы на наличие текста в них.
Ранее, в статье Ajax-форма обратной связи на jQuery мы уже рассмотрели создание формы обратной связи средствами Ajax(без перезагрузки страницы). Но как можно увидеть в том демо-примере, отправка сообщения идет даже в том случае, если поля не заполнены. Это не логично, согласитесь?
Ниже мы напишем простой скрипт, который будет проверять заполнены ли обязательные поля(отмеченные required). В случае если они заполнены - успешно отправлять сообщение, в противном случае - выдавать сообщение об ошибке. Стоит так же отметить, что данный скрипт будет работать только для единственной формы на странице, если вы хотите проверять разные формы на одной странице, код прийдется немного видоизменить.
Мы не будем изобретать велосипед и возьмем результаты статьи, указанной выше. Скачать их вы можете тут:
После чего мы немного подкорректируем структуру формы и 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 ваш, на который вы хотите получить письмо):
А получившиеся исходники примера можете скачать по ссылке ниже:
Добавить комментарий
Авторизоваться с помощью: