Автоматическая валидация поля телефона с примерами кода

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

Почему стандартной валидации WPForms недостаточно для поля телефона

WPForms позволяет задать тип поля «Телефон» и включает базовую проверку, которая лишь проверяет, что поле не пустое и содержит цифры. Однако она не учитывает:

• Различные форматы телефонных номеров (например, с кодом страны, без кода, с разделителями, пробелами, скобками).
• Допустимые символы, чтобы предотвратить ввод букв или спецсимволов.
• Автоматическое форматирование номера по мере ввода.

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

Как добавить кастомную серверную валидацию номера телефона в WPForms

WPForms предоставляет удобный хук wpforms_process_validate, который позволяет добавлять собственные правила проверки полей перед отправкой формы. Рассмотрим пример функции, которая проверяет, что номер телефона соответствует формату России +7XXXXXXXXXX или 8XXXXXXXXXX.

function wpformsru_validate_phone_field( $field_id, $field_submit, $form_data, $fields ) {
    // ID поля телефона — замените на свой
    $phone_field_id = 3;
    if ( $field_id === $phone_field_id ) {
        // Убираем все символы, кроме цифр
        $phone = preg_replace('/\D+/', '', $field_submit);
        // Проверяем длину и первые цифры
        if ( ! preg_match('/^(7|8)\d{10}$/', $phone) ) {
            wpforms()->process->errors[ $form_data['id'] ][ $field_id ] = 'Введите корректный номер телефона в формате +7XXXXXXXXXX';
        }
    }
}
add_action( 'wpforms_process_validate', 'wpformsru_validate_phone_field', 10, 4 );

В этом коде:

• $phone_field_id — идентификатор поля телефона в вашей форме WPForms.
• Функция очищает строку от всех символов, кроме цифр, и проверяет, что номер начинается с 7 или 8 и содержит ровно 11 цифр.
• Если условие не выполняется — добавляется ошибка, и форма не отправляется.

Добавление клиентской валидации с автоматическим форматированием номера

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

Пример простого скрипта, который вставляется на страницу с формой (например, в footer.php темы или через плагин вставки кода):

document.addEventListener('DOMContentLoaded', function() {
    var phoneInput = document.querySelector('input[name="wpforms[fields][3]"]'); // замените 3 на ID поля
    if (!phoneInput) return;

    phoneInput.addEventListener('input', function(e) {
        var val = phoneInput.value.replace(/\D/g, '');
        if (val.startsWith('8')) {
            val = '+7' + val.slice(1);
        } else if (!val.startsWith('7')) {
            val = '+7' + val;
        } else {
            val = '+' + val;
        }
        if (val.length > 12) val = val.slice(0, 12);
        phoneInput.value = val;
    });
});

Этот скрипт автоматически преобразует ввод пользователя в формат +7XXXXXXXXXX, ограничивает длину и избавляет от запрещённых символов.

Как совместить серверную и клиентскую валидации для лучшего результата

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

• Клиентская валидация и форматирование помогают пользователю сразу вводить корректный номер.
• Серверная валидация гарантирует, что данные, попавшие на сервер, соответствуют требуемому формату и не нарушают логику обработки.

Плюс, при необходимости вы можете дополнительно отправлять номера в сервисы проверки или интегрировать с CRM.

Дополнительные плагины и инструменты для улучшения работы с WPForms

Кроме кастомных решений, можно использовать плагины, которые расширяют функционал WPForms:

• Clearfy Pro — помогает оптимизировать и обезопасить WordPress, включая улучшение обработки форм.
• WPForms — сам плагин для создания форм с возможностью кастомизации через хуки.

Также можно комбинировать с плагинами для масок ввода, например Input Mask, если нужна более сложная клиентская валидация.

Заключение

Автоматическая валидация поля телефона в WPForms — важный шаг для повышения качества сбора данных и удобства пользователей. Приведённые примеры PHP-кода и JavaScript помогут реализовать гибкую и надёжную проверку номеров в нужном формате, снизить количество ошибок и улучшить конверсию ваших форм.