Поля ввода и их валидация
Илья Страйков как-то написал:
Технологи изобрели маски, проверку на количество символов, домены и ещё чёрти что. На самом деле всё намного проще. Поле с номером телефона можно пропускать, если в нём есть хоть что-то, а почту — если есть собака, точка и текст вокруг них. Это всё.
Все так. Если только от этих данных особо ничего не зависит. Или если заранее знать, что те люди, которые будут заполнять поля — трезвые, здравомыслящие «грамотные пользователи ПК», которые никогда и ни в чем не ошибаются.
Нет, я серьезно. Вот вполне обычные примеры заполнения полей Депо рано утром, поздно ночью и вечером в пятницу:
Владимир.ivanov@yandex.ru. Так пишут ребята под градусом или не очень компьютерные люди, которым диктуют почту по телефону («владимир, точка, да, латиницей, иванов, вэ как галочка…»). Они не получат подтверждение брони и останутся без билета в почте.
+7 495 555-55-55, доб. 1912. Возможно, закрутились, и по привычке написали так, как обычно пишут коллегам. Или скопировали из подписи своего письма и не заметили лишнего. Или просто не понимают, в чем может быть потенциальная проблема. Таким людям не отправится смска об отмене или переносе рейса.
Vladimir Ivanov вместо Ivanov Vladimir (перепутали поля имени и фамилии). Просто невнимательные. Их вообще не посадят на рейс.
Чтобы избежать всей этой фигни, нужно идти двумя путями: автоматически исправлять то, что можно исправить, а там, где это нельзя сделать самим, ненавязчиво подсказывать людям возможную ошибку. И еще упрощать сам процесс ввода. А чтобы все это работало, нужны проверки посложнее.
Теперь подробнее и с примерами правил.
Почта
Что вводить:
Латиницу независимо от раскладки. Просто не обращаем внимания на текущую раскладку: обычный человек этого не заметит, а Владимир.ivanov поймет, что кириллица тут не пройдет.
Все цифры.
Символы: ! # $ % & ‘ * + — / = ? ^ _ ` { | } ~
Точку, если она не в начале или в конце. Еще советуют не воспринимать больше одной точки, но гуглопочте на это, например, все равно: напишите мне на k.a.p.a.n.a.g.a@gmail.com, и я вам отвечу.
Бонус: yandex.com → yandex.ru. С почтой Гугла не пройдет, потому что у gmail.ru есть пара десятков пользователей, один из которых может когда-нибудь захотеть заполнить вашу форму.
Телефон
Главный формат номера: +X XXX XXX–XX–XX или X XXX XXX–XX–XX.
Мобильный +7 9XX XXX-XX-XX, 8 9XX XXX-XX-XX
Московский +7 495 XXX-XX-XX, 8 495 XXX-XX-XX, +7 499 XXX-XX-XX, 8 499 XXX-XX-XX
Питерский +7 812 XXX-XX-XX, 8 812 XXX-XX-XX
(7|8)(9[0–9]{2}|495|499|812)([0–9]{3})([0–9]{2})([0–9]{2})Когда введенный номер, начинающийся с 8, подходит под главный формат, можно его поменять на +7 после потери фокуса.
Если большинство клиентов из России, можно сэкономить на вводе кода страны, написав его сразу. Код должен быть стираемый. Плохо код убирать в отдельную выпадалку — тыкать в нее сложнее, чем переписать в общем инпуте (плюс выпадалку часто не замечают, и пишут в это поле полный номер вместе с кодом).
Что можно вводить в поле и как:
Цифры. ≤22 штук; если формат подходит под наш, то 11.
Пробел . После потери фокуса: двойные менять на одинарные, в начале и в конце затирать.
Плюс + только в начале.
Дефис ‑ для разделителей.
Короткое тире –, минус − и тире — форматируем автоматом в дефис.
Скобки ( ) после потери фокуса затирать.
Пробелы и дефисы должны подставляться по ходу набора номера.
После +7 и 8 подставлять пробел.
Карта
Номер карты. Обычно 16 цифр, пробел после каждой 4-й подставляется автоматом. Это сокращает ошибки, а не только для красоты. Второй формат по частоте — 18 цифр. Тогда пробел после восьмой цифры. По первым шести цифрам можно опознать банк, выпустивший карту (см., например, как это использует Рокетбанк).
Владелец карты. Минимум 2 буквы (одна для имени, одна для фамилии) и пробел, допускается ввод точки (K. PETROV) и дефиса (K. PETROV-VODKIN). Независимо от раскладки и регистра вводить прописной латиницей, можно сделать разрядку букв.
Valid thru. От 3 до 4 цифр: 2/18 (слеш введен вручную), 02/18 (слеш подставлен автоматом после двух введенных цифр). Кстати, советую писать прямо на английском, потому что на карте так написано (соотв., найти проще).
CVC и CVV. 3 цифры (для AmEx — 4), поле необязательно для заполнения (бывают карты без этого кода).
Дата
Условия ввода:
Дата вводится в формате дд.мм.гггг, максимум 8 цифр (допускается формат дд.мм.гг, который форматируется после потери фокуса: 12.12.80 → 12.12.1980). Хорошо, если после потери фокуса меняется формат на 12 дек 1980 (при фокусе возвращается в дд.мм.гггг).
Точки подставляются сразу по ходу набора (см. выше).
Если пользователь (не смотря на монитор, например) вводит дату, указывая разделитель «., , / — символы не дублируются (вводятся только цифры и подставляются автоматом точки).
Форматирование происходит с короткой задержкой для улучшения обратной связи: пишешь два, и видишь краем глаза, как точка подставилась — клево.
В поле должны работать стандартные операции:
— выделение всего Ctlr/Cmd + A,
— вставка Ctrl/Cmd + V,
— выделение текста с клавиатуры шифт + стрелки вправо/влево,
— выделенный текст должен стираться при наборе
— отмена Ctlr/Cmd + Z и отмена отмены Ctrl/Cmd + Shift + Z
— перемещение стрелками ← → ↑ ↓
— Tab (+ Shift), Home, End
Правка бэкспейсом и делитом:
Почти все из этих правил работают на Депо при вводе паспортных данных.
UPD: с января 2016 развитием сайта Депо занимается его команда
