Этот урок описывает создание формы обратной связи с проверкой полей на стороне клиента (JavaScript) и отправкой данных на сервер (PHP) с помощью AJAX.
Подключение jQuery
Для работы необходимо подключить библиотеку jQuery. Можно использовать CDN Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Подключение осуществляется в <body> документа после загрузки страницы.
Валидация полей формы
JavaScript-функция проверяет корректность заполненных полей формы при отправке. Значения полей name, email, subject и message извлекаются с помощью свойства val().
$(document).ready(function() {
$('button[type="submit"]').click(function(e) {
e.preventDefault();
let name = $('#name').val();
let email = $('#email').val();
let subject = $('#subject').val();
let message = $('#message').val();
let error = '';
if (name.length < 3) {
error += 'Имя не меньше трёх символов<br>';
}
// Проверка email (упрощенный метод)
if (email.split('@').length !== 2) {
error += 'Некорректный email<br>';
}
if (subject.length < 5) {
error += 'Тема сообщения не менее пяти символов<br>';
}
if (message.length < 20) {
error += 'Сообщение не менее двадцати символов<br>';
}
if (error !== '') {
$('#messageShow').html('<div class="errorClear">' + error + '</div>').show();
return;
}
// Отправка данных на сервер (AJAX)
$.ajax({
url: 'send.php',
type: 'POST',
data: {
name: name,
email: email,
subject: subject,
message: message
},
dataType: 'text',
success: function(response) {
$('#messageShow').html(response).show();
},
error: function() {
$('#messageShow').html('Ошибка отправки сообщения').show();
}
});
});
});Для вывода сообщений об ошибках используется блок с ID messageShow. Стиль отображения ошибок (красный цвет, центрирование):
.errorClear {
color: red;
text-align: center;
width: 100%;
display: block;
}Отправка данных на сервер (AJAX) и обработка на сервере (PHP)
После успешной валидации данные отправляются на сервер send.php с помощью AJAX. Файл send.php обрабатывает данные и отправляет email:
// (Код AJAX представлен выше)<?php
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$subject = htmlspecialchars($_POST['subject']);
$message = htmlspecialchars($_POST['message']);
if (empty($name) || empty($email) || empty($subject) || empty($message)) {
echo 'Заполните все поля';
exit;
}
$to = 'your_email@example.com';
$headers = "From: " . $email . "r\n" .
"Reply-To: " . $email . "r\n" .
"Content-type: text/html; charset=utf-8";
$subject = "Тема сообщения: " . $subject;
$message = "Имя: " . $name . "<br>Email: " . $email . "<br>Сообщение: " . $message;
if (mail($to, $subject, $message, $headers)) {
echo 'Сообщение отправлено';
} else {
echo 'Сообщение не отправлено';
}
?>Функция htmlspecialchars защищает от XSS-атак. Замените your_email@example.com на ваш email.
В этом уроке описана реализация формы обратной связи с клиентской валидацией и отправкой данных на сервер через AJAX и PHP. Функция mail() используется для отправки email. Обработка ошибок реализована на стороне клиента и сервера.