Поля ввода и их валидация

Илья Страйков как-то написал:

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

Все так. Если только от этих данных особо ничего не зависит. Или если заранее знать, что те люди, которые будут заполнять поля — трезвые, здравомыслящие «грамотные пользователи ПК», которые никогда и ни в чем не ошибаются.

Нет, я серьезно. Вот вполне обычные примеры заполнения полей Депо рано утром, поздно ночью и вечером в пятницу:

Владимир.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 после потери фокуса.

Если большинство клиентов из России, можно сэкономить на вводе кода страны, написав его сразу. Код должен быть стираемый. Плохо код убирать в отдельную выпадалку — тыкать в нее сложнее, чем переписать в общем инпуте (плюс выпадалку часто не замечают, и пишут в это поле полный номер вместе с кодом).

«+7 » в плейсхолдере, это же вставляется при клике на поле (стирать «+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 развитием сайта Депо занимается его команда