Валидация номера телефона в форме заявки: что это, почему важна и как установить на сайте в HTML-коде самостоятельно

239

Алёна Введенская

Автор гайдов, практикующий арбитражник

Прочитать позже:

Треш-лиды — это как друзья, которые пришли на вечеринку, но забыли предупредить. Они появляются внезапно и создают хаос, но в глубине души ты знаешь, что они не нарочно. Просто у них свои приколы.

Треш-лиды часто возникают из-за неправильно введенных номеров телефонов. Пользователи могут ошибиться при вводе номера или указать несуществующий. Это влияет на общее качество трафика, и как итог — арбитражник тратит деньги в молоко. Чтобы избежать таких ситуаций, нужно использовать валидацию номеров.

Валидация номера телефона: что за зверь

Начнем с базы.

Валидация номера телефона — это проверка правильности номера, который пользователь указал в форме заявки.

Это позволяет убедиться, что номер и вправду существует, его используют, и он соответствует определённым требованиям и стандартам. Например,:

есть ли в номере нужное количество цифр;
указан ли код страны;
есть ли разделители между цифрами (например, дефисы или пробелы);
в правильном ли формате заполнена форма.

Как выполнить валидацию номера: основные способы

Существует несколько подходов к проверке номера телефона в HTML-форме. Какой из них использовать, зависит от ваших потребностей и опыта.

HTML-атрибуты в полях ввода. Самый лёгкий метод валидации — использовать HTML-атрибуты в полях ввода. Эти атрибуты позволяют определить тип данных, требуемых для каждого поля, обозначить обязательные поля, ограничить длину строки и установить максимальные и минимальные значения для чисел.

Для примера мы рассмотрим именно этот вариант. Вы убедитесь, что сделать всё самостоятельно быстро и без лишних затрат не составит труда.

Валидация на JavaScript. Можно настроить проверку данных с использованием JavaScript. На этом языке создаются:

функции для проверки информации;
сообщения для пользователя, если тот неправильно заполнил поле.

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

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

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

Как валидация номера выглядит и работает: в теории

Чтобы проверить номер телефона в HTML-форме, используйте атрибуты pattern и title в теге <input>. Атрибут pattern задает регулярное выражение для правильного формата номера, а title показывает пользователю ошибку, если данные не соответствуют требованиям.

Вот пример кода HTML для поля ввода номера телефона с проверкой:

<form>
<label for=»phone»>Номер телефона:</label>
<input type=»tel» id=»phone» name=»phone» pattern=»[0-9]{3}-[0-9]{2}-[0-9]{3}» title=»Введите номер телефона в формате XXX-XX-XXX» required>
<input type=»submit» value=»Отправить»>
</form>

Пока очень интересно, но ничего не понятно!

А вот, почему он выглядит так. Атрибут pattern определяет формат номера телефона: XXX-XX-XXX, где X — любая цифра, а {3} и {2} задают длину групп цифр (3 и 2 цифры соответственно). Разделитель между группами цифр — дефис.

Атрибут title подсказывает пользователю, какой формат номера нужно ввести.

Есть еще атрибут required, который делает поле обязательным для заполнения перед отправкой формы.

Как валидация номера выглядит и работает: на практике

Идем смотреть на живом примере:

value=»+381» placeholder=»+381ххххххxххх» pattern=»\+381\d{8,10}» maxlength=»14« title=»Unesite broj u formatu: +381xxxxxxxxxxxx«

Расшифровка этой тарабарщины:

value="+381": Атрибут value задает начальное значение для поля ввода. В этом случае значение «+381» автоматически помещается в поле при загрузке страницы.
placeholder="+381ххххххxххх": Атрибут «placeholder» указывает, какой формат ввода ожидается от пользователя. В этом случае, «+381» — это код страны, а «x» обозначает любую цифру.
pattern="\+381\d{8,10}": Атрибут «pattern» устанавливает правило для проверки вводимых данных. В этом случае, регулярное выражение «+381\d{8,10}» означает, что данные должны начинаться с «+381» и содержать от 8 до 10 цифр.
maxlength="14": Атрибут «maxlength» ограничивает максимальное количество символов, которые можно ввести в поле. В этом случае, разрешено только 14 символов, включая код страны «+381» и от 8 до 10 цифр.
title="Unesite broj u formatu: +381xxxxxxxxxxxx": Атрибут «title» подсказывает пользователю, как правильно заполнить поле ввода. В этом случае, пользователю говорят, что номер должен быть в формате «+381xxxxxxxxxxxx».

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

Кусочек кода лендинга в трекере с уже прописанным валидатором

Проверяем, правильно ли мы настроили валидацию номера телефона. Заходим на ленд и вводим заведомо некорректные данные.

Форма заявки, когда данные введены неверно

На скрине видно, что заявку не получится отправить, пока мы не введем нужное количество цифр в номере телефона. А значит, все работает! Стата защищена от невалидных лидов из-за невнимательности или намеренного вредительства пользователей.

Почему это важно знать

Валидаторы — надежные союзники в битве с невалидными лидами. Они помогают арбитражникам сберечь время и средства, минимизировать количество треша в стате.

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