Как настроить автопроверку форм в WordPress с помощью AJAX

Автор: Лев Орлов | Опубликовано: 12.04.2026

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

Почему автопроверка форм важна для WordPress

Проверка форм — это часто первая линия защиты от некорректных или вредоносных данных. Если проверка выполняется только после отправки формы и перезагрузки страницы, пользователь тратит время и может разочароваться. Автопроверка позволяет:

Сократить количество ошибок при заполнении.
Улучшить взаимодействие с пользователем.
Снизить нагрузку на сервер, предотвращая повторные отправки.

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

Основы AJAX в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы на сервер без перезагрузки страницы. В WordPress для этого существует особый механизм с двумя основными точками входа:

wp_ajax_{action} — для авторизованных пользователей
wp_ajax_nopriv_{action} — для неавторизованных пользователей

Где {action} — уникальный идентификатор нашего AJAX-запроса.

Чтобы подключить AJAX, нужно:

Добавить JavaScript-код для отправки запроса.
Создать PHP-функцию-обработчик, которая принимает и валидирует данные.
Зарегистрировать обработчик в WordPress.

Пример: автопроверка email на уникальность

JS-часть: отправка AJAX-запроса

Добавим скрипт, который будет отслеживать ввод в поле email и отправлять запрос на сервер:

jQuery(document).ready(function($) {
  $('#email').on('blur', function() {
    var email = $(this).val();
    if(email.length > 0) {
      $.ajax({
        url: wptests_ajax.ajax_url,
        type: 'POST',
        data: {
          action: 'wptests_check_email',
          email: email,
          security: wptests_ajax.nonce
        },
        success: function(response) {
          if(response.success) {
            $('#email-feedback').text('Email свободен').css('color', 'green');
          } else {
            $('#email-feedback').text(response.data).css('color', 'red');
          }
        },
        error: function() {
          $('#email-feedback').text('Ошибка проверки').css('color', 'red');
        }
      });
    }
  });
});

Здесь мы отслеживаем событие blur (потеря фокуса), берём значение и отправляем AJAX-запрос с параметрами.

Регистрация скрипта и локализация

Подключим скрипт и передадим ему адрес AJAX и nonce для безопасности в functions.php темы или плагина:

function wptests_enqueue_scripts() {
  wp_enqueue_script('wptests-ajax', get_template_directory_uri() . '/js/wptests-ajax.js', array('jquery'), '1.0', true);
  wp_localize_script('wptests-ajax', 'wptests_ajax', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('wptests_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'wptests_enqueue_scripts');

PHP-обработчик AJAX-запроса

Создаём функцию, которая проверит email в базе пользователей, и зарегистрируем её для AJAX:

function wptests_ajax_check_email() {
  check_ajax_referer('wptests_nonce', 'security');

  if(empty($_POST['email']) || !is_email($_POST['email'])) {
    wp_send_json_error('Некорректный email');
  }

  $email = sanitize_email($_POST['email']);

  if(email_exists($email)) {
    wp_send_json_error('Этот email уже зарегистрирован');
  } else {
    wp_send_json_success();
  }
}
add_action('wp_ajax_wptests_check_email', 'wptests_ajax_check_email');
add_action('wp_ajax_nopriv_wptests_check_email', 'wptests_ajax_check_email');

Функция проверяет nonce для безопасности, валидирует email и отвечает JSON-объектом с результатом проверки.

Как расширить автопроверку: другие поля и сценарии

Автопроверка может быть использована не только для email, но и для:

Проверки уникальности логина.
Валидации пароля (например, длина, сложность).
Проверки правильности формата телефона или других данных.

Для каждой проверки создайте отдельный action и обработчик, либо объедините логику в одном с передачей параметров.

Пример проверки логина

function wptests_ajax_check_login() {
  check_ajax_referer('wptests_nonce', 'security');

  if(empty($_POST['login']) || !validate_username($_POST['login'])) {
    wp_send_json_error('Некорректный логин');
  }

  $login = sanitize_user($_POST['login']);

  if(username_exists($login)) {
    wp_send_json_error('Логин уже занят');
  } else {
    wp_send_json_success();
  }
}
add_action('wp_ajax_wptests_check_login', 'wptests_ajax_check_login');
add_action('wp_ajax_nopriv_wptests_check_login', 'wptests_ajax_check_login');

Плагины для удобства и расширения возможностей автопроверки

Если не хочется писать код с нуля, можно использовать готовые плагины с поддержкой AJAX-валидации:

Clearfy Pro — включает расширенные инструменты безопасности и валидации.
My Popup — поддерживает AJAX-формы с проверкой данных на лету.

Эти плагины можно использовать как основу и расширять под свои нужды.

Советы по безопасности и оптимизации

При реализации автопроверки важно:

Использовать check_ajax_referer для защиты от CSRF.
Валидировать и очищать все входящие данные.
Не раскрывать слишком много информации во время проверки (например, точное наличие логина или email может быть уязвимостью).
Оптимизировать запросы к базе, чтобы не создавать излишнюю нагрузку.

Выводы

Автопроверка форм в WordPress с помощью AJAX — мощный инструмент для улучшения UX и повышения качества данных. Используя стандарты WordPress и собственные функции с AJAX, можно быстро и безопасно реализовать проверку практически любых полей.

Пример, приведённый в статье, легко адаптируется под разные задачи, а готовые плагины помогут сэкономить время и добавить дополнительные функции.