Створення привабливої форми. Частина 4

327

Від автора: виходячи з відгуків і побажань до попередніх уроків даного циклу, ми виділили і вирішили показати реалізацію двох моментів: валідація поля email і відправка форми на email.

Вирішення цих двох завдань ми і покажемо в поточному уроці. При цьому першу задачу нам необхідно вирішити не тільки на стороні сервера, але і на стороні клієнта.

План уроку:

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

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

3. Відправка форми на email.

Деталі підручника

Тема: PHP

Складність: Середня

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

Час: 00:41:33

Розмір архіву: 79 Mb

Створення привабливої форми. Частина 4Створення привабливої форми. Частина 4

Отже, почнемо з валідації поля email на стороні сервера. Для валідації (відповідності формату) нам потрібно скласти регулярний вираз. Воно буде таким:

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

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

Тепер додамо умова перевірки email після перевірки заповнення обов’язкових полів. При цьому валідувати полі email ми будемо тільки в тому випадку, якщо щось отримали з цього поля:

if(!preg_match($pattern, $_POST[’email’])){
$_SESSION[‘res’][‘error’] .= “Поле не відповідає формату email
“;
$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
“;
}
}

Отримуємо значення поля 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.

На цьому наш урок закінчено. Якщо у Вас виникли які-небудь питання з уроку, то надсилайте їх, будь ласка, на нашому форумі.

Удачі і до нових зустрічей!