Contact Form 7: как реализовать живую валидацию полей с кастомным JavaScript

В стандартном функционале Contact Form 7 валидация формы выполняется только после нажатия кнопки отправки. Но часто возникает задача сделать живую валидацию полей — когда пользователь вводит данные, сразу видеть ошибки и подсказки, не дожидаясь отправки формы. В этой статье подробно рассмотрим, как реализовать такую живую валидацию с помощью кастомного JavaScript и расширить стандартные возможности Contact Form 7.

Почему нужна живая валидация в Contact Form 7

Живая валидация улучшает UX формы, снижает количество ошибок при заполнении и уменьшает количество повторных отправок формы. Особенно это важно на сложных многошаговых формах или с полями, где легко ошибиться (например, email, телефон, номер карты и т.д.).

Contact Form 7 по умолчанию проверяет поля только при отправке, что не всегда удобно. Живая валидация, реализованная на JavaScript, позволяет сразу показать подсказку или ошибку, а также блокировать кнопку отправки до исправления ошибок.

Как подключить кастомный JavaScript к Contact Form 7

Для начала нужно подключить собственный скрипт, который будет слушать события ввода в поля формы. Лучше всего это делать, используя хук wp_enqueue_scripts и проверяя, что скрипт подключается только на страницах с формой.

function contactform7ru_enqueue_live_validation_script() {
    if (is_page() && has_shortcode(get_post()->post_content, 'contact-form-7')) {
        wp_enqueue_script('contactform7ru-live-validation', get_template_directory_uri() . '/js/contactform7ru-live-validation.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'contactform7ru_enqueue_live_validation_script');

В данном примере предполагается, что файл contactform7ru-live-validation.js лежит в папке js вашей темы. Это скрипт, который реализует логику живой валидации.

Пример реализации живой валидации для поля email и телефона

Создадим скрипт с проверкой формата email и маски для телефона. Если данные невалидны — показываем ошибку и блокируем кнопку отправки.

jQuery(document).ready(function($) {
    function contactform7ru_validateEmail(email) {
        var re = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
        return re.test(email);
    }

    function contactform7ru_validatePhone(phone) {
        var re = /^\+?\d{10,15}$/; // простой пример проверки телефона
        return re.test(phone);
    }

    $('.wpcf7-form input[name="your-email"]').on('input', function() {
        var val = $(this).val();
        if (!contactform7ru_validateEmail(val)) {
            $(this).addClass('contactform7ru-error');
            $(this).next('.contactform7ru-error-message').remove();
            $(this).after('<span class="contactform7ru-error-message" style="color:red; font-size:12px;">Введите корректный email</span>');
        } else {
            $(this).removeClass('contactform7ru-error');
            $(this).next('.contactform7ru-error-message').remove();
        }
        contactform7ru_toggleSubmit();
    });

    $('.wpcf7-form input[name="your-phone"]').on('input', function() {
        var val = $(this).val();
        if (!contactform7ru_validatePhone(val)) {
            $(this).addClass('contactform7ru-error');
            $(this).next('.contactform7ru-error-message').remove();
            $(this).after('<span class="contactform7ru-error-message" style="color:red; font-size:12px;">Введите корректный телефон</span>');
        } else {
            $(this).removeClass('contactform7ru-error');
            $(this).next('.contactform7ru-error-message').remove();
        }
        contactform7ru_toggleSubmit();
    });

    function contactform7ru_toggleSubmit() {
        var errors = $('.wpcf7-form .contactform7ru-error').length;
        if (errors > 0) {
            $('.wpcf7-form input[type=submit]').attr('disabled', 'disabled');
        } else {
            $('.wpcf7-form input[type=submit]').removeAttr('disabled');
        }
    }

    // Инициализируем состояние кнопки при загрузке
    contactform7ru_toggleSubmit();
});

В этом коде мы навесили обработчики событий input на поля email и телефон, проверяем данные и выводим ошибку под полем. При наличии ошибок кнопка отправки становится неактивной.

Как добавить стили для ошибок валидации

Для наглядности и лучшего UX стоит добавить CSS стили, которые выделят ошибочные поля и сообщения. Добавьте в файл стилей темы или через кастомный CSS:

.contactform7ru-error {
    border-color: red !important;
    background-color: #ffe6e6;
}
.contactform7ru-error-message {
    display: block;
    margin-top: 5px;
}

Это выделит поле красной рамкой и фоном, а сообщение сделает заметным и читаемым.

Как расширить валидацию на другие типы полей

Вы можете расширять эту структуру, добавляя свои функции валидации и навешивая обработчики на другие поля Contact Form 7. Например, валидация числовых полей, проверка обязательных чекбоксов, динамическая проверка по API и т.д.

Пример валидации числового поля:

$('.wpcf7-form input[name="your-age"]').on('input', function() {
    var val = $(this).val();
    if (!val || isNaN(val) || val < 18 || val > 99) {
        $(this).addClass('contactform7ru-error');
        $(this).next('.contactform7ru-error-message').remove();
        $(this).after('<span class="contactform7ru-error-message" style="color:red; font-size:12px;">Введите возраст от 18 до 99 лет</span>');
    } else {
        $(this).removeClass('contactform7ru-error');
        $(this).next('.contactform7ru-error-message').remove();
    }
    contactform7ru_toggleSubmit();
});

Интеграция с плагинами для улучшения форм

Если вы используете плагин Clearfy Pro, он поможет оптимизировать и ускорить работу скриптов Contact Form 7, а также убрать лишний код. Плагин WPGPT можно применить для генерации подсказок и автозаполнения полей формы при помощи искусственного интеллекта прямо в админке.

Для сложных форм с логикой и расчетами можно также рассмотреть плагин Quizle, который позволяет создавать интерактивные формы с пошаговой валидацией и динамическими ответами.

Итог

Живая валидация в Contact Form 7 значительно улучшает пользовательский опыт и снижает ошибки при заполнении. С помощью простого кастомного JavaScript вы можете реализовать проверку email, телефона и любых других полей в режиме реального времени. Это несложно, и вы легко сможете расширить этот механизм под свои задачи.

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

Для скачивания и тестирования рекомендуем использовать официальные ресурсы и надежные плагины, например, из WPShop.ru.