Маска телефона ломает отправку формы: где искать ошибку

Маска телефона кажется маленькой frontend-деталью, но она легко ломает форму. Пользователь видит красивый номер, нажимает “Отправить”, а заявка не уходит, телефон приходит пустым, сервер отклоняет данные или CRM получает номер в странном формате.

Маска должна помогать вводу, но настоящая проверка телефона всё равно должна быть на сервере. JavaScript в браузере — это удобство, а не источник истины.

Проверить name у input

Самая простая ошибка: поле визуально есть, но у него нет name. Тогда браузер не отправит его в форме.

<input type="tel" id="phone" placeholder="+7 (___) ___-__-__">

Правильно:

<input type="tel" name="phone" id="phone" placeholder="+7 (___) ___-__-__">

Если форма отправляется через AJAX, name тоже важен, если данные собираются через FormData.

disabled-поля не отправляются

Если поле disabled, оно не попадёт в отправку формы. Иногда разработчики ставят disabled во время инициализации маски и забывают снять.

<input type="tel" name="phone" disabled>

Если поле должно быть недоступно для редактирования, но отправляться, используют readonly, а не disabled.

Проверить FormData

Для AJAX-формы можно быстро посмотреть, какие данные реально собираются.

const formData = new FormData(form);

for (const [key, value] of formData.entries()) {
    console.log(key, value);
}

Если phone там нет, проблема не на сервере. Нужно смотреть HTML, name, disabled, вложенность input внутри form.

JS-валидация

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

+7 (999) 000-00-00

Но пользователь может вводить номер в другом формате, особенно если сайт работает не только с российскими телефонами. Не стоит делать маску жестче бизнес-требований.

Нормализация на сервере

На backend лучше привести телефон к единому виду: убрать пробелы, скобки, дефисы и проверить количество цифр.

$phone = $_POST['phone'] ?? '';
$digits = preg_replace('/\D+/', '', $phone);

if (strlen($digits) < 10) {
    throw new RuntimeException('Некорректный телефон');
}

Сохранять можно нормализованный номер и исходное значение, если оно нужно для отображения.

Скрытое поле с чистым номером

Иногда удобно иметь видимое поле с маской и скрытое поле с нормализованным номером. Но важно не запутаться, какое поле отправляется в CRM.

<input type="tel" id="phone_masked">
<input type="hidden" name="phone" id="phone_clean">

Перед отправкой JS должен заполнить hidden-поле. Если скрипт упал, phone_clean будет пустым. Поэтому серверная проверка всё равно обязательна.

Маска и автозаполнение

Браузерное автозаполнение может конфликтовать с маской. Пользователь выбирает номер из сохранённых данных, визуально он есть, но скрипт не обновил внутреннее значение.

Проверять форму нужно не только ручным вводом, но и autofill, мобильной клавиатурой, копированием номера из буфера.

Мобильные устройства

Для телефона лучше использовать type="tel". Это не валидирует номер, но открывает удобную клавиатуру на мобильных.

<input type="tel" name="phone" autocomplete="tel">

autocomplete помогает браузеру подставлять номер, но не заменяет проверку.

Ошибка в CRM или письме

Если сервер получил номер, а CRM нет, проблема уже не в маске. Нужно проверить маппинг полей, шаблон письма, API-запрос или обработчик формы.

[
    'PHONE' => $digits,
]

Частая ошибка: backend принимает phone, а интеграция отправляет user_phone или PHONE_WORK, которого внешний сервис не ждёт.

Чек-лист

1. Проверить name у поля телефона.
2. Убедиться, что input не disabled.
3. Посмотреть FormData перед отправкой.
4. Проверить JS-валидацию на разных форматах номера.
5. Нормализовать телефон на сервере.
6. Не доверять только frontend-маске.
7. Проверить autofill, mobile и copy-paste.
8. Проверить маппинг телефона в CRM или письме.

Маска телефона должна быть тонким слоем удобства. Если от неё зависит сама возможность отправить заявку, форма становится хрупкой. Надёжный вариант — простая маска, понятная серверная проверка и проверенный путь номера до CRM или письма.