Практика: интерактивная форма обратной связи на jQuery

Оглавление

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

1. Вёрстка формы

<form id="contactForm" action="submit.php" method="post" novalidate>
  <div>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>
    <span class="error-message"></span>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <span class="error-message"></span>
  </div>
  <div>
    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" required></textarea>
    <span class="error-message"></span>
  </div>
  <button type="submit">Отправить</button>
  <div id="formStatus"></div>
</form>
<div id="loader" style="display:none;">Отправка...</div>

2. CSS для ошибок и статуса

.error-message {
  color: red;
  font-size: 0.9em;
  display: none;
}
#formStatus {
  margin-top: 10px;
  font-weight: bold;
}

3. jQuery: валидация и динамическое отображение ошибок

$(function() {
  $('#contactForm').on('submit', function(e) {
    e.preventDefault();

    let isValid = true;
    $('.error-message').hide().text('');

    // Валидация имени
    let name = $('#name').val().trim();
    if (name.length < 2) {
      $('#name').next('.error-message').text('Введите корректное имя').show();
      isValid = false;
    }

    // Валидация email (простой паттерн)
    let email = $('#email').val().trim();
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
      $('#email').next('.error-message').text('Введите корректный email').show();
      isValid = false;
    }

    // Валидация сообщения
    let message = $('#message').val().trim();
    if (message.length < 10) {
      $('#message').next('.error-message').text('Сообщение слишком короткое').show();
      isValid = false;
    }

    if (!isValid) return;

    // Отправка через AJAX
    $('#loader').show();
    $('#formStatus').text('');
    $.ajax({
      url: $(this).attr('action'),
      method: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      success: function(response) {
        $('#loader').hide();
        if (response.success) {
          $('#formStatus').css('color', 'green').text('Сообщение отправлено!');
          $('#contactForm')[0].reset();
        } else {
          $('#formStatus').css('color', 'red').text('Ошибка: ' + response.error);
        }
      },
      error: function() {
        $('#loader').hide();
        $('#formStatus').css('color', 'red').text('Ошибка отправки. Попробуйте позже.');
      }
    });
  });
});

4. Пример ответа от сервера (submit.php)

<?php
header('Content-Type: application/json');

$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');

if (strlen($name) < 2 || !filter_var($email, FILTER_VALIDATE_EMAIL) || strlen($message) < 10) {
    echo json_encode(['success' => false, 'error' => 'Неверные данные']);
    exit;
}

// Здесь добавить отправку письма или сохранение

echo json_encode(['success' => true]);

5. Итог

Реализована базовая валидация полей с сообщениями об ошибках
Отправка данных через AJAX без перезагрузки страницы
Индикатор загрузки и вывод статуса отправки
Обработка ошибок как на клиенте, так и на сервере

6. Задание для закрепления

Добавь очистку ошибок при изменении поля
Реализуй ограничение на количество символов в сообщении с динамическим счётчиком
Добавь блокировку кнопки отправки во время отправки формы

Jquery

+ Читать