Как создать проверку валидации формы на AJAX в WordPress с примерами кода

Почему важна AJAX-валидация форм в WordPress

Валидация форм — важнейший этап при работе с пользовательскими данными. Спасибо AJAX, теперь мы можем проверять корректность введённой информации без перезагрузки страницы, что значительно улучшает пользовательский опыт. Особенно это актуально для WordPress-сайтов с кастомными формами, будь то регистрация, подписка или обратная связь.

В этой статье мы рассмотрим, как создать собственную валидацию формы на AJAX с примерами кода, которые можно использовать в своих проектах на WordPress, а также разберём особенности безопасности и UX.

Как работает AJAX-валидация в WordPress

Принцип работы следующий: при отправке формы JavaScript перехватывает событие submit, собирает данные формы и отправляет их на сервер через AJAX-запрос к специальному обработчику в WordPress. Обработчик проверяет данные, возвращает результат (ошибки или успех), после чего JavaScript показывает пользователю уведомления без перезагрузки страницы.

Для организации такого функционала нам нужно зарегистрировать AJAX-обработчики на сервере и написать JavaScript-код для отправки и обработки ответа.

Создание серверного обработчика AJAX в WordPress

Добавим в файл functions.php вашей темы или в свой плагин следующий код. Мы используем префикс wpdemo_ для функций, чтобы избежать конфликтов:

add_action('wp_ajax_wpdemo_validate_form', 'wpdemo_validate_form_callback');
add_action('wp_ajax_nopriv_wpdemo_validate_form', 'wpdemo_validate_form_callback');

function wpdemo_validate_form_callback() {
    // Проверка nonce для безопасности
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpdemo_form_nonce')) {
        wp_send_json_error(['message' => 'Ошибка безопасности, повторите попытку.']);
        wp_die();
    }

    $errors = [];
    $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
    $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

    // Проверяем имя
    if (empty($name)) {
        $errors['name'] = 'Введите ваше имя';
    } elseif (mb_strlen($name) < 3) {
        $errors['name'] = 'Имя должно быть не менее 3 символов';
    }

    // Проверяем email
    if (empty($email)) {
        $errors['email'] = 'Введите email';
    } elseif (!is_email($email)) {
        $errors['email'] = 'Введите корректный email';
    }

    if (!empty($errors)) {
        wp_send_json_error(['errors' => $errors]);
    } else {
        wp_send_json_success(['message' => 'Форма успешно прошла валидацию']);
    }

    wp_die();
}

Здесь мы определяем два AJAX-хука: для авторизованных и неавторизованных пользователей. Функция wpdemo_validate_form_callback проверяет nonce, валидирует поля и возвращает JSON-ответ с ошибками или сообщением об успехе.

Добавляем форму и JavaScript для AJAX-валидации

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

Добавьте в шаблон или в кастомный шорткод следующий HTML:

<form id="wpdemo-ajax-form">
  <label>Имя:<input type="text" name="name" /></label>
  <div class="wpdemo-error" data-error-for="name" style="color:red;"></div>
  <label>Email:<input type="email" name="email" /></label>
  <div class="wpdemo-error" data-error-for="email" style="color:red;"></div>
  <input type="hidden" name="nonce" value="<?php echo wp_create_nonce('wpdemo_form_nonce'); ?>" />
  <button type="submit">Отправить</button>
  <div id="wpdemo-form-message" style="margin-top:10px;"></div>
</form>

Теперь подключим JavaScript. Добавьте этот код в файл wpdemo-ajax.js и подключите его через wp_enqueue_script с передачей ajaxurl:

document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('wpdemo-ajax-form');
  var messageBox = document.getElementById('wpdemo-form-message');

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    // Очистка ошибок
    var errorElements = form.querySelectorAll('.wpdemo-error');
    errorElements.forEach(function(el) { el.textContent = ''; });
    messageBox.textContent = '';

    var formData = new FormData(form);
    formData.append('action', 'wpdemo_validate_form');

    fetch(ajaxurl, {
      method: 'POST',
      credentials: 'same-origin',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        messageBox.style.color = 'green';
        messageBox.textContent = data.data.message;
      } else {
        messageBox.style.color = 'red';
        if (data.data.errors) {
          for (var field in data.data.errors) {
            var errorDiv = form.querySelector('.wpdemo-error[data-error-for="' + field + '"]');
            if (errorDiv) {
              errorDiv.textContent = data.data.errors[field];
            }
          }
        } else if (data.data.message) {
          messageBox.textContent = data.data.message;
        }
      }
    })
    .catch(error => {
      messageBox.style.color = 'red';
      messageBox.textContent = 'Ошибка сервера, попробуйте позже.';
      console.error('Ошибка AJAX:', error);
    });
  });
});

Подключение скрипта в WordPress

Чтобы скрипт работал, зарегистрируем и подключим его в WordPress:

function wpdemo_enqueue_scripts() {
    wp_enqueue_script('wpdemo-ajax', get_stylesheet_directory_uri() . '/js/wpdemo-ajax.js', ['jquery'], null, true);
    wp_localize_script('wpdemo-ajax', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'wpdemo_enqueue_scripts');

Обратите внимание, что мы передаём URL AJAX-обработчика через wp_localize_script в переменную ajaxurl.

Практические советы по улучшению и безопасности

Используйте nonce для защиты

Как показано в примере, nonce помогает защититься от CSRF-атак. Никогда не пропускайте проверку nonce в AJAX-обработчиках.

Обрабатывайте и фильтруйте данные

Используйте встроенные функции WordPress (sanitize_text_field, sanitize_email, is_email) для очистки и проверки входящих данных.

Улучшайте UX подсказками

При валидации показывайте ошибки рядом с соответствующими полями, используйте цветовые индикаторы и информируйте пользователя о статусе отправки.

Поддержка плагинов WPShop

Если вы используете плагин My Popup, можно интегрировать AJAX-валидацию в формы всплывающих окон для мгновенной проверки данных до отправки.

Также полезен плагин Clearfy Pro для оптимизации и повышения безопасности AJAX-запросов.

Итоги и расширения

Мы создали простой, но надёжный механизм AJAX-валидации формы в WordPress. Этот подход можно расширять: добавлять валидацию других полей, интегрировать с REST API, делать мультишаговые формы с проверкой на каждом шаге.

Такой функционал значительно повышает качество взаимодействия с пользователем и снижает нагрузку на сервер за счёт уменьшения количества перезагрузок страниц.