Форма e-mail подписки с валидатором на jQuery

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

Форма подписки на сайт

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

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Форма e-mail подписки с валидатором на jQuery</title>
  <!-- Стили -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Подключаемся к jQuery -->
  <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 форму с кнопкой, по нажатию на которую адрес обрабатывается и сохраняется в базе или в файл кому как удобно. В уроке рассмотрим же сохранение в бузу данных. Так будет более наглядней, упор сделаем на проверку правильности введенного адреса. Вот таким образом выглядит форма подписки:

<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.

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 был добавлен в список рассылки.
function completeInviteForm() {
         setTimeout(function() { $("#completeform").fadeOut(400, function(){
            $.ajax({
                type: 'POST',
                 url: 'save.php',  
                 data: 'email='+$("#email").val(),  
                 success: function(){  
                 $('#completeform').before('<span class="msg">Все готово! Вы добавлены в список рассылки.</span>');}
                });
         });
         }, 1100);
      }

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

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

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

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

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

$(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(), которую мы рассмотрели выше.

    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:

Создаем базу данных email

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

Создание таблицы address

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

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

Атрибуты полей

Файл save.php

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

<?
   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 сценарий).

P.S.: Вы тратите средства на развитие и продвижение своего проекта в интернете, но не получаете желаемой отдачи? Хватит выбрасывать деньги на ветер, вам срочно нужен специалист в области интернет маркетинга! Доверьтесь профессионалу и уже в скором времени Вы увидите положительный результат.

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

  • Solven

    Очень классно, спасибо за скрипт!
    Вопросик: что нужно дописать что бы добавить еще два текстовых поля, к примеру: Имя и телефон.. ? 

    • Не за что =) 
      добавляем текстовые поля на форму и каждому свой уникальный id (например поле имя id=’name’, а телефон id=’phone’). 

      далее изменяем немного аякс запрос, а именно строку 
      data: ’email=’+$(«#email»).val()+’&name=’+$(«#name»).val()+’&phone=’+$(«#phone»).val(),

      ну а дальше, уже в файле обработчике к данным по этим id можно и обращаться, извлекать из массива POST.

      как-то так)

  • Дима

    Было бы замечательно, если бы вы дописали до этого кода, еще и скрипт непосредственно самой e-mail рассылки. Т.е. e-mail адрес был добавлен в БД, а как теперь по этим адресам отправлять пользователям обновления из сайта. Хотелось бы если бы, автоматически все что новое добавлено на сайте, отправлялось в виде письма на почту подписчиков.
    Вы можете это написать?

    • Написать можно все, что угодно =) было бы время и желание! Хорошо я подумаю над Вашим предложением и скорее всего напишу урок продолжение. Спасибо за совет)