Как улучшить поле с номером телефона или как его может «сломать» пользователь?

Приветствую.
Задался целью изменить поле с номером телефона так, чтобы оно заполнялась максимально корректно. В поле есть placeholder с образцом заполнения номера телефона, в него встроен плагин заполнения данных по маске (jquery.maskedinput). Иногда люди заполняют это поле не глядя на него и не проверяя того, что они туда вписали, таких не много, но они есть; некоторые пишут восьмерку, хотя в форме уже указано +7. В результате иногда приходят формы с номером телефона без одной цифры:
Должно прийти: +7 (999) 123-45-67.
А приходит: +7 (899) 912-34-56 (не хватает цифры 7).
Накидал дополнительную обработку поля: Codepen. Теперь при вводе первой цифрой 8 шаблон переключается на другой: с +7 (999) 999-99-99 на 8 (999) 999-99-99. Хотелось бы чтобы ваш опытный взгляд помог в правильном оформлении работы этого поля.

Я рассматривал много вариантов библиотек, но не смог подобрать что-то стоящее. Может быть, искал не там и вы подскажете что-то конкретное или как доработать эту.

На ум пришло несколько вариантов того, как можно оформить, но у всех у них есть то, что мне не очень нравится:
1. Убрать вообще плагин форматирования ввода (maskedinput) и оставить свободное поле. В этом случае все будет с большой вероятностью корректно, но не очень красиво.
2. Вести запись всех клавиш пользователя и отправлять их вместе с формой, чтобы в случае некорректно заполненного поля можно было просмотреть отсутствующую цифру. Но это, кажется, перебор.
3. При отправке формы проверять корректность результата заполнения поля, форму не отправлять и выводить пользователю уведомление. Вариант подходящий, но приведенный мной в коде показался более дружелюбным.
4. Отключить возможность ввода первой цифры восьмерки...ХЗ.

В общем, прошу вашего совета в написании поля. Если не затруднит, гляньте форму, попробуйте заполнить как-нибудь совсем криво в прямом смысле этого слова так, чтобы было понятно — можно как-то не так её в примере заполнить. А стоит ли вообще заморачиваться? Людей таких не много, один из нескольких десятков. Может быть оставить все как есть — жесткую форму по маске +7 (XXX) XX-XX-XX...
  • Вопрос задан
  • 737 просмотров
Пригласить эксперта
Ответы на вопрос 6
l3ftoverz
@l3ftoverz
Люблю Финский металкор
Заставлять вводить только 10 знаков номера, код страны вынести отдельным select списком, с автоопределением и возможностью поиска в нём. Маска на поле ввода.
Ответ написан
@Kotmail
Вы можете просто сделать проверку на первую цифру, используя возможности jquery.maskedinput, который Вы применяете. Пример кода ниже не позволит ввести первую цифру в маску, если она будет соответствовать 7 или 8, при этом любые другие цифры будут доступны для ввода. По идее, это должно решить Вашу проблему с нехваткой одной цифры в номере, если пользователь не обратил внимание на уже стоящую +7.

$.mask.definitions['N'] = '[/0-6|9/]';
$("#phoneInput").mask("+7(N99) 999-99-99");

Живой пример.
Ответ написан
dom1n1k
@dom1n1k
Выкинуть нахрен все маски. Пусть пользователь заполняет телефон в произвольном формате - со скобочками или без, через пробел или дефис, да хоть через двоеточие.
Единственное, что стоит проконтролировать - это общее количество цифр (чтоб не меньше нужного) и наличие/отсутствие плюса (для понимания формата). Всё.
Дальше на стороне сервера все посторонние символы вычищаются, остается только номер.
Ответ написан
anton_reut
@anton_reut
Начинающий веб-разработчик
иногда приходят формы с номером телефона без одной цифры

- просто увеличь количество допустимых знаков на 1 или 2 тогда даже при лишней восьмерке ты сможешь увидеть все цифры.
Ответ написан
написать проверку на js
1) сделать отображение:
+7 [ введите номер телефона 10 цифр ]
2) если первая цифра 7 или 8 то просто ее не печатать (блокировать скриптом)
3) разрешить ввод 10 цифр (ограничение по длине и только цифры)
4) после того как человек ввел 4 цифры ставим пробел или тире (скриптом), тоже самое и после ввода 7 цифр.
5) Можно еще оформить ввод цветом, галочкой/крестиком или замочком с краю, чтобы пользователю было визуально понятно, что все окей

это скрипт всего на 5-7 строк, 2 регулярных выражения и отслеживание нажатие кнопки
Если нужен скрипт задайте вопрос в теме по javascript.
Ответ написан
@ns174ru
https://ns174.ru
Можно оставить всё как есть, но дописать скрипт js, выводящий в отдельный блок на сайте информацию о необходимости проверки номера телефона, если первая цифра 7 или 8.
В случае если и этого недостаточно и валидация телефонов важна, можно отправлять смс с кодом подтверждения на введенный номер и только после верно указанного сего(кода), отправлять форму на сервер.
Но это уже зависит от необходимых зажач и бюджета.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы