Форма e-mail подписки с валидатором на jQuery | XoZblog - Уроки и статьи по созданию сайта, блога

Здравствуйте, уважаемые читатели XoZbloga! В этом уроке я покажу, как мы можем сделать форму e-mail подписки на HTML5 с проверкой введенного адреса на JQuery. Для проверки будем использовать регулярные выражения, а сохранять введенный адрес будем в базе данных MySql. Таким образом при сохранении будет использован AJAX (т.е. вызовем PHP сценарий без перезагрузки страницы). Результат можно посмотреть на демонстрационной странице, а также скачать исходники. Приступаем!

Базовая разметка

Начнем с создания нового файла index.html. И сделаем простую структуру документа придерживаясь HTML5. Также сразу подключим стили CSS и библиотеку jQuery, она нам понадобится при проверке введенного e-mail:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма e-mail подписки с валидатором на jQuery</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>

</body>
</html>

Теперь все готово для создания формы!

Форма e-mail подписки

Цель нашей формы, это проверить введенный адрес электронной почты посетителя и как-то сохранить его в список подписчиков. Для этого делаем обычную HTML форму с кнопкой, по нажатию на которую адрес обрабатывается и сохраняется в базе или в файл кому как удобно. В уроке рассмотрим же сохранение в бузу данных. Так будет более наглядней, упор сделаем на проверку правильности введенного адреса. Вот таким образом выглядит форма подписки:

1
2
3
4
5
6
7
8
9

<div id="completeform">
<span id="error"></span>

<form id="inviteform" name="inviteform" method="post" action="#">
<input type="email" name="email" id="email" placeholder="Введите Ваш E-mail" autocomplete="off" autocorrect="off" autocapitalize="off">

<div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Подписаться</button></div>
</form>
</div>

Завернем форму в блок div #completeform, для того чтобы после сохранения адреса можно, форму можно было свернуть.

Также используем пару новых атрибутов в поле ввода. Тип поля установлен «email», так что мобильные браузеры могут отображать соответствующую клавиатуру. Chrome и некоторые WebKit браузеры будет использовать это, чтобы проверить, ввел ли пользователь адрес. Атрибуты autocorrect и autocapitalize предназначены специально для мобильных браузеров.

Span с id error изначально скрыт, за что отвечает свойство display со значением none, это у нас прописано в файле со стилями, о нем чуть позже. Но как только пользователь ввел неверный адрес почты в span выводится сообщение с предупреждением.

Валидатор jQuery и AJAX запрос

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

1
2
3
4
5

function isEmail(email) {
// регулярное вырожение для проверки введенного адреса
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}

Разберемся с функцией completeInviteForm(). Чтобы форма ввода адреса не сбивала с толку, свернем эффектом fadeOut в течении 400 миллисекунд. А в качестве обратного вызова, обратимся к функции $.ajax(), с ее помощью вызовем файл save.php и сохраним введенный адрес в базу. Исходный код файла save.php приведу чуть ниже, а пока разберемся с функцией $.ajax().

$.ajax — загружает удаленную страницу используя HTTP запрос. В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом. В нашем случаем будем использовать следующие объекты:

type:’POST’ — выбираем тип запроса к файлу, по умолчанию GET, разница между POST и GET не особо большая, просто при GET-запросе данные передаются в заголовке а при POST в теле запроса, поэтому с помощью POST можно передать больший объем информации;
url:’save.php’ — путь до исполняемого файла;
data:’email=’+$(«#email»).val() — данные которые отсылаются на сервер. С помощью CSS селектора #email обратимся к элементу с id=»email» и получим содержимое атрибута value, то есть введенные пользователем email. И присвоим это содержимое переменной email, которую будем использовать в файле save.php;
success: function(){ $(‘#completeform’).before(‘Все готово! Вы добавлены в список рассылки.‘);} — функция success вызывается при удачном выполнении ajax запроса. Функция выполняет следующие действие. Перед дивом #completeform вставляем контент, оповещающий пользователя, что его email был добавлен в список рассылки.

1
2
3
4
5
6
7
8
9
10
11
12

А с помощью метода setTimeout скрытие формы и выполнение ajax-запроса происходит асинхронно с задержкой 1100 миллисекунд.

Обработка формы

Для удобства обращения к элементам страницы, создадим пару переменных, с селекторами #error и #btnwrap.

1 2	var erdiv = $("#error"); var btnwrap = $("#btnwrap");

С помощью обработчика событий live отслеживаем нажатие на кнопку «Подписаться» ее id=»sendbtn». Метод e.preventDefault(); отменяет стандартное поведение браузера на действие (нажатие на кнопку), а именно отменяем обновление страницы и изменение URL. Переменной emailval присваиваем введенный email, и можем приступать к обработке этой переменной.

1
2
3
4
5
6

$(document).ready(function(){
$("#sendbtn").live("click", function(e){
// После нажатия на кнопку отменяем стандартное поведение браузера
// и создаем переменную
e.preventDefault();
var emailval = $("#email").val();

Первое if if(!isEmail(emailval)) проверяет если функция isEmail вернула ложь (false), то это означает, введенный пользователем электронный адрес не совпадают с регулярным выражением то есть не верный, оповестим пользователя об этом в блок error выводим сообщение (Вы не правильно ввели адрес электронной почты).

Теперь второе if выполняется только в том случае, если пользователь ввел верный электронный адрес. Тогда мы можем начать процесс сохранения адреса.

Чтобы процесс был наглядным в блок error вставляем соответствующий текст, а в блок где находилась кнопка «Подписаться» помещаем GIF изображение. И вызываем функцию completeInviteForm(), которую мы рассмотрели выше.

1
2
3
4
5
6
7
8
9
10
11
12

if(!isEmail(emailval)) {
erdiv.html("Вы не правильно ввели адрес электронной почты");
erdiv.css("display", "block");
}
if(isEmail(emailval)) {
erdiv.css("color", "#719dc8");
erdiv.html("обработка...");
btnwrap.html('<img src="img/loader.gif" alt="loading">');
(completeInviteForm(), 900);
}
});
});

База данных

Так как я выбрал способ сохранение в базу данных введенного адреса, то коротко расскажу о создании самой базы и таблицы, а также как и обещал код файла save.php, который и работает с базой данных MySql.

Для этого нам понадобится локальный сервер, я использую Denwer. Наверняка многие им пользуются, поэтому вдаваться в подробности не буду. Переходим phpMyAdmin, и создаем базу данных email:

Для сохранения адресов подписчиков нам понадобится одна таблица с двумя полями, назовем ее address:

Поля будут следующие:

id — идентификатор электронного адреса (он же первичный ключ);
address — непосредственно сам электронный адрес.

Файл save.php

Вот и пришло время рассказать о последнем элементе создаваемой подписки, о файле save.php. В нем находится PHP сценарий сохранения электронного адреса в базу данных.

1
2
3
4
5
6

<?
if(isset($_POST['email'])) { $email = $_POST['email']; }
$db = mysql_connect("localhost","root","");
mysql_select_db("email",$db);
mysql_query("INSERT INTO address (address) VALUES ('$email')",$db);
?>

Сначала проверяем существует ли в глобальном массиве POST переменная email, если да то присваиваем ее значение локальной переменной $email. Далее устанавливаем соединение с сервером mysql_connect() пользователь root, пароля нет. Выбираем базу данных email и выполняем запрос к базе, вставляем новую запись в таблицу address, где в поля address будет вставлено значение переменной $email. Вот и все!

На этом урок заканчиваю. Хочу напомнить, что данная подписка работает только на сервере (так как мы используем базу и PHP сценарий).

Источник статьи/урока: https://xozblog.ru

По материалам: http://designm.ag/tutorials/building-an-e-mail-request-invite-form-with-jquery/

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Просмотр демо страницы и скачивание исходников не доступно