Как вывести сообщения об ошибках при отправке формы в WooCommerce через AJAX

Диагностика проблемы: почему сообщения об ошибках не отображаются в AJAX-формах WooCommerce

Частая ситуация при кастомизации WooCommerce — формы на фронтенде отправляются через AJAX, но сообщения об ошибках (например, при валидации полей) не показываются пользователю. Вместо этого форма просто «зависает» или закрывается без уведомлений.

Причины:

• Код обработчика AJAX не возвращает или не выводит сообщения об ошибках в правильном формате.
• JavaScript на клиенте не обрабатывает ответ сервера и не выводит ошибки.
• Ошибки валидации WooCommerce не добавляются в сессию или не собираются в массив ошибок.

Пошаговое решение: вывод ошибок WooCommerce при AJAX-отправке

1. Добавление серверной валидации и возврата ошибок

На стороне PHP нужно перехватывать отправку формы, валидировать данные и возвращать JSON с ошибками.

add_action('wp_ajax_wc_custom_form_submit', 'wc_custom_form_submit_handler');
add_action('wp_ajax_nopriv_wc_custom_form_submit', 'wc_custom_form_submit_handler');

function wc_custom_form_submit_handler() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wc_custom_form_nonce')) {
        wp_send_json_error(['message' => 'Неверный запрос']);
    }

    $errors = new WP_Error();

    $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';
    if (empty($email) || !is_email($email)) {
        $errors->add('invalid_email', 'Введите корректный email');
    }

    $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
    if (empty($name)) {
        $errors->add('empty_name', 'Имя обязательно для заполнения');
    }

    if ($errors->has_errors()) {
        wp_send_json_error(['messages' => $errors->get_error_messages()]);
    }

    // Здесь логика обработки формы, например, создание заказа

    wp_send_json_success(['message' => 'Форма успешно отправлена']);
}

2. JavaScript: обработка ответа и вывод ошибок

На фронтенде необходимо перехватить ответ AJAX и вывести ошибки в удобном месте.

jQuery(document).ready(function($) {
    $('#custom-form').on('submit', function(e) {
        e.preventDefault();

        var data = {
            action: 'wc_custom_form_submit',
            nonce: wc_custom_form_params.nonce,
            email: $('#email').val(),
            name: $('#name').val()
        };

        $.post(wc_custom_form_params.ajax_url, data, function(response) {
            $('#form-messages').empty();
            if (response.success) {
                $('#form-messages').append('<div class="success">' + response.data.message + '</div>');
                $('#custom-form')[0].reset();
            } else {
                if (response.data.messages) {
                    response.data.messages.forEach(function(msg) {
                        $('#form-messages').append('<div class="error">' + msg + '</div>');
                    });
                } else {
                    $('#form-messages').append('<div class="error">Произошла ошибка. Попробуйте позже.</div>');
                }
            }
        });
    });
});

3. Локализация и подключение параметров AJAX

В functions.php зарегистрируйте скрипт и передайте переменные:

function wc_custom_form_scripts() {
    wp_enqueue_script('wc-custom-form', get_template_directory_uri() . '/js/wc-custom-form.js', ['jquery'], null, true);
    wp_localize_script('wc-custom-form', 'wc_custom_form_params', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wc_custom_form_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wc_custom_form_scripts');

Проверка результата после внедрения

• Отправьте форму с пустыми или некорректными данными — ошибки должны появиться под формой без перезагрузки страницы.
• Отправьте корректные данные — должна появиться успешная подсказка, форма очистится.
• Проверьте консоль браузера на отсутствие JS-ошибок.
• Проверьте, что AJAX-запрос отправляется на admin-ajax.php и возвращает JSON с нужными данными.

Частые ошибки и их исправление

• Ошибки не отображаются: проверьте, что в JS добавлена обработка response.success и response.data.messages.
• Ошибка 400 или 403: убедитесь, что nonce корректно создаётся и проверяется на сервере.
• Ошибка «Произошла ошибка» без сообщений: убедитесь, что WP_Error возвращается через wp_send_json_error с массивом сообщений.
• Форма не отправляется: проверьте, что e.preventDefault() вызывается в обработчике формы.

Практические советы по безопасности и производительности

• Используйте wp_nonce для защиты AJAX-запросов от CSRF.
• Обрабатывайте и фильтруйте все входящие данные через sanitize_text_field, sanitize_email и т.п.
• Не выводите подробные ошибки на продакшене — можно показывать общие сообщения.
• Кэшируйте статические скрипты и минимизируйте их для ускорения загрузки.

Сравнение вариантов реализации вывода ошибок

Вариант	Плюсы	Минусы
Использование WP_Error и JSON-ответа	Стандартный подход, легко расширяемый, интеграция с WooCommerce	Требует написания серверного и клиентского кода
Вывод ошибок через сессию и перезагрузку	Простота реализации без AJAX	Не подходит для UX с AJAX, требует перезагрузки страницы
Использование плагинов валидации AJAX	Меньше кода, готовые решения	Может быть избыточно, добавляет зависимость от стороннего ПО