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

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

От автора: исходя из отзывов и пожеланий к предыдущим урокам данного цикла, мы выделили и решили показать реализацию двух моментов: валидация поля email и отправка формы на email.

Решение этих двух задач мы и покажем в текущем уроке. При этом первую задачу нам необходимо решить не только на стороне сервера, но и на стороне клиента.

План урока:

    1. Валидация поля email на стороне сервера.

    2. Валидация поля email в JavaScript.

    3. Отправка формы на email.

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

Тема: PHP

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

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

Время: 00:41:33

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

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

Итак, начнем с валидации поля email на стороне сервера. Для валидации (соответствия формату) нам потребуется составить регулярное выражение. Оно будет таким:

$pattern = "#^[a-z0-9_-]+@[a-z0-9_-]+\.([a-z0-9]{1,6}\.)?[a-z]{2,6}$#i";

Эту строку можно добавить после массива $fields (перед проверкой чекбокса). Замечу, что я не добиваюсь полного соответствия email формату, определенному в стандартах. Я просто разрешил те символы, которые могут там быть.

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

if(!empty($_POST['email'])){
	if(!preg_match($pattern, $_POST['email'])){
		$_SESSION['res']['error'] .= "Поле email не соответствует формату <br />";
		$error = true;
	}
}

Временно закомментируем подключение скрипта form.js и можем проверить результат валидации (после — не забудьте раскомментировать подключение скрипта). Если все сделано верно, то теперь скрипт пропускает только почтовые адреса, соответствующие формату, описанному нами в шаблоне регулярного выражения.

Теперь перейдем к клиентскому скрипту, где также необходимо организовать проверку соответствия поля email определенному формату. В файле form.js после определения массива fields определим переменные pattern и email:

var pattern = /^[a-z0-9_-]+@[a-z0-9_-]+\.([a-z0-9]{1,6}\.)?[a-z]{2,6}$/i;
var email = $("#email");

В переменной pattern содержится шаблон регулярного выражения, а в переменную email мы отобрали само поле email, поскольку мы будем неоднократно к нему обращаться.

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

if(email.val() != ''){
	if(email.val().search(pattern) == -1){
		email.addClass("formError");
		error = 1;
		err_text += "Поле email не соответствует формату <br />";
	}
}

Получаем значение поля email и вызываем для него метод search(), параметром которого выступает шаблон регулярного выражения. Если метод возвращает в качестве результата «-1″, значит, совпадения нет.

Если совпадения нет, то мы запишем соответствующее сообщение в переменную err_text. Но эта переменная у нас инициализируется ниже, поэтому давайте ее инициализацию перенесем выше, например, поставим после переменной errorCheck.

Если все сделано без ошибок, то теперь и клиентский скрипт будет проводить валидацию поля email.

Теперь перейдем к отправке формы на email. Вся работа, как и говорилось в прошлом уроке, будет проводиться в блоке ИНАЧЕ (else) условия по проверке переменной error на ошибки.

Само письмо формируется функцией mail(), которой мы будем передавать 4 параметра:

$to — получатель;

$subject — тема письма;

$body — тело письма;

$headers — заголовки.

Основная работа здесь нужна только при формировании тела письма. Нам нужно взять информацию из всех полей формы и структурированно разместить ее в переменной $body.

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

$all_fields = array("lastname" => "Фамилия",
					"firstname" => "Имя",
					"middlename" => "Отчество",
					"email" => "Email",
					"emailAlt" => "Альтернативные Email",
					"country" => "Страна",
					"comment" => "Комментарий");

Теперь для складывания данных в переменную $body мы пройдемя по массиву данных ($_POST), получая ключ (имя поля в форме) и значение (данные из поля). Если данные поля будут пусты, то мы напишем, что это поле не было заполнено. При этом мы точно будем знать, какое именно «это» поле было не заполнено, для этого достаточно обратиться к массиву $all_fields и по ключу получить значение элемента массива — это и будет название текущего поля формы.

В коде это будет выглядеть так:

foreach ($_POST as $key => $value) {
	if(!array_key_exists($key, $all_fields)) continue;
	$value = trim($value);
	if(empty($value)) $value = "Поле не заполнено";
	$body .= "{$all_fields[$key]}: \r\n{$value}\r\n\r\n";
}

Здесь мы также воспользовались функцией array_key_exists() для того, чтобы в тело письма не попал чекбокс формы. Как Вы могли заметить, это поле не включено в массив $all_fields.

Переменная $body у нас есть, осталось сформировать еще 3 переменные и сформировать письмо:

foreach ($_POST as $key => $value) {
	if(!array_key_exists($key, $all_fields)) continue;
	$value = trim($value);
	if(empty($value)) $value = "Поле не заполнено";
	$body .= "{$all_fields[$key]}: \r\n{$value}\r\n\r\n";
}
$to = 'здесь_нужный_email';
$subject = "Заполнена форма на сайте";
$headers = "FROM: " .strtoupper($_SERVER['SERVER_NAME']). "<>\r\n";
$headers .= "Content-type:text/plain; charset=utf-8";
if(mail($to, $subject, $body, $headers)){
	$_SESSION['res']['ok'] = "Спасибо, Ваш отзыв принят.";
}else{
	$_SESSION['res']['error'] .= "Ошибка при отправке письма!";
}

Вот, собственно, и все. Теперь заполненная форма должна приходить на email, указанный в переменной $to.

На этом наш урок завершен. Если у Вас возникли какие-либо вопросы по уроку, то задавайте их, пожалуйста, на нашем форуме.

Удачи и до новых встреч!

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

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

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

Метки: ,

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

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

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

  1. Богдан

    Здравствуйте! Очень мне нравятся Ваши уроки. Решил сделать свою первую форму. Но столкнулся с такой проблемой: На виртуальной машине Denwer «Проверка отладочной заглушки для sendmail» письма присутствую, а когда закидываю на реальный хостинг — письма не приходят. Проверял несколько раз все ввожу верно. Попробовал исходник из своим E-mail. Может ли быть это связано с хостингом?

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

      Здравствуйте, Богдан.
      Если после отправки формы Вы видите на экране сообщение «Спасибо, Ваш отзыв принят», то значит функция mail() отработала без ошибок и сформировала письмо. Что происходит дальше — об этом PHP не знает… тут возможны 2 варианта:
      1. Функция mail() формирует письмо, но отправлять его должен почтовый сервер. Возможно этот сервер не настроен или настроен с ошибками. Тут уже вопрос хостеру.
      2. Но перед тем, как тормошить хостера, следует проверить почту адресата. Вполне возможно, что письма просто попадают в спам. Попробуйте в качестве получателя указать другой email или даже несколько email’ов при этом обязательно на разных доменах. В идеале вообще лучше указывать родной почтовый адрес, т.е. почтовик на том же домене, что и скрипт формы.
      Других причин просто нет. Так что пробуйте, начиная со второго варианта :)

      • Александр

        Добрый день!!!!
        У меня похожая проблема. Если подробней, на виртуальной машине Denwer письма отправляются и приходят в папку денвера. При загрузке формы на хостинг данные с формы не отправляются, выскакивает «Ошибка при отправке письма!»,
        Подскажите пожалуйста что делать?????

  2. Кирилл

    Уважаемый Андрей, спасибо Вам за Ваши бесценные труды. У меня к Вам есть небольшая просьба, не могли бы Вы записать урок как к данной форме прикрутить капчу. Знаю что на сайте есть видеоурок про созданию капчи “2 варианта капчи для сайта.”, кстати за него Вам тоже отдельное спасибо, но я к сожалению так и не смог с ним разобратся. Заранее благодарен.

  3. Руслан

    Добрый день, серия Уроков действительно оказалось очень полезной, но возникла несколько вопросов.
    1 — Можно ли динамически настроить сбор полей, а не жёстко прописывать их для отправки на Е-майл — $all_fields(как раз про это массив и говорю)
    2 — Можно ли динамически брать значения полей, а не писать самому как сделано это для массива — $fields. К примеру сайт может быть мульти-язычным.

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

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

  4. Iryna

    Андрей, спасибо большое за этот урок, он мне сегодня очень помог)
    Люблю Ваши уроки)

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

Ваш 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