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

Question

[weranda]

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

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

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

В общем, прошу вашего совета в написании поля. Если не затруднит, гляньте форму, попробуйте заполнить как-нибудь совсем криво в прямом смысле этого слова так, чтобы было понятно — можно как-то не так её в примере заполнить. А стоит ли вообще заморачиваться? Людей таких не много, один из нескольких десятков. Может быть оставить все как есть — жесткую форму по маске +7 (XXX) XX-XX-XX...

Comments

[Сергей delphinpro]

А вот мой номер телефона 8 (84676) 22-54-6. Как мне его вести в вашу маску? =)

[weranda]

Сергей delphinpro, А вам и не надо его вводить. Код региона указывает на привязку номера телефона к другому региону, не Москве или МО. Следовательно, вам это не надо)

[Сергей delphinpro]

weranda, 8 [phone] (доб. 17)

[weranda]

Сергей delphinpro, хорошо что добавочный не из 20 цифр состоит)))

[Артур К.]

Очень больная тема!
А если я с мобильного? И телефон сам заполняет номер? Как правило, и получается дичь с первой цифрой

Answer 1

[Владислав Грудин]

Вы можете просто сделать проверку на первую цифру, используя возможности jquery.maskedinput, который Вы применяете. Пример кода ниже не позволит ввести первую цифру в маску, если она будет соответствовать 7 или 8, при этом любые другие цифры будут доступны для ввода. По идее, это должно решить Вашу проблему с нехваткой одной цифры в номере, если пользователь не обратил внимание на уже стоящую +7.

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

Живой пример.

Comments

[Константин Цветков]

САНКТ-ПЕТЕРБУРГ: 812

[weranda]

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

Answer 2

[dom1n1k]

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

Comments

[Антон Р.]

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

[dom1n1k]

Так и я про то. Ввод телефона через маску не помогает пользователю, а наоборот мешает, потому что в ней нужно разбираться.
При этом трудно даже понять - а в чём собственно проблема у разраба? Ведь очистка номера от лишнего мусора ну ваще легко делается, одна регулярка.
Единственная полезная помощь - указать инпуту type="tel", чтобы смартфоны показали нужную клавиатуру.

[weranda]

dom1n1k, Этот вариант я рассматривал. Он вполне рабочий, но одно маленькое но — когда реальный человек заполняет в браузере номер телефона, то он его заполнит строго по шаблону, а роботы-спамеры заполняют как только придется (произвольно). При отправке формы поле телефона проверяется регуляркой по маске ввода. Если формат соответствует объявленному в поле формы, тогда сообщение приходит на почту, а если не соответствует, тогда отправляется в спам. К такому способу я какими-то неведомыми тропами пришел. Если люди будут заполнять форму как им вздумается, тогда придется что-то придумывать дополнительно со спамом.
Антон Р. Я не уверен, но что-то мне подсказывает, что в вашем случае была какая-то проблема во взаимодействии людей с выбором даты в форме, возможно, сложности дизайна.

[dom1n1k]

Ну если вам борьба со спамом важнее, чем удобство живых людей, то дело хозяйское :)

Answer 3

[Антон Р.]

иногда приходят формы с номером телефона без одной цифры

- просто увеличь количество допустимых знаков на 1 или 2 тогда даже при лишней восьмерке ты сможешь увидеть все цифры.

Comments

[weranda]

Тогда поле ввода будет имень вид незавершенного действия. Смотрите:
Введено 10 цифр, а дизайн подсказываем о том, что надо заполнить еще одну позицию. Как это побороть я не знаю, да и как-то нескладно смотрится номер телефона где вначале есть конструкция вида "[phone]".

[jenovas]

А нельзя просто сделать поле ввода без маски и нормализовать номер уже на сервере?

Answer 4

[Анатолий]

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

это скрипт всего на 5-7 строк, 2 регулярных выражения и отслеживание нажатие кнопки
Если нужен скрипт задайте вопрос в теме по javascript.

Answer 5

[Artem Ivanov]

Можно оставить всё как есть, но дописать скрипт js, выводящий в отдельный блок на сайте информацию о необходимости проверки номера телефона, если первая цифра 7 или 8.
В случае если и этого недостаточно и валидация телефонов важна, можно отправлять смс с кодом подтверждения на введенный номер и только после верно указанного сего(кода), отправлять форму на сервер.
Но это уже зависит от необходимых зажач и бюджета.