wearegeronimo / vuelidate-form

vuelidate-form

###ux/ui формы

1. Все расположено в одну колонку (за исключением серии и номера паспорта), согласно исследованиям, последовательное заполнение более понятно и не вызывает растерянности;
2. Имя полей легко читаемое;
3. Ненавязчивый дизайн;
4. Пользователю известно, сколько ему нужно заполнять, а так же сколько блоков он уже заполнил
5. Изначально, пользователь не видит обязательные к заполнению поля, по исследованиям было выявлено, что явно выделенные поля, которые требуют заполнения, бессознательно заставляют быть человека менее открытым
6. Ошибки имеют черный цвет, с акцентом на поле, а не на требование;
7. Ненавязчивые подсказки в полях ввода, помогут пользователю, в случае сомнения.

###Немного о форме:

• Поле имя, фамилия, отчество проверяются на буквенную принадлежность, а так же знак тире, чтобы учесть двойные имена или фамилии (Заинковская-Бережная). Стандартный валидатор alpha во vuelidate работает только с латиницей, я добавил валидатор на латиницу и кириллицу + знак тире.
• Чтобы пользователь вводил номер в нужном формате - '+7...', '7...', '8...', нужно забрать возможность выбора :) В объект вносится номер с кодом страны (7) и имеет вид 79877777777, хотя в форме перед номером стоит '+7', это сделано для ненавязчивого акцента на том, чтобы пользователь вводил номер с кода оператора. Простую семерку плохо видно.
• Введенная дата рождения и дата выдачи документа не проверяется на валидность или соотв. возрасту - в задании это не указано.
• Форма валидируется поблочно, если валидацию не пройдена, пользователь не может попасть на следующий блок и ему высвечиваются ошибки
• Поля для заполнения паспортных данных и вод. удостоверения совпадают, а какие поля для ввода нужны для свид. о рождении - я не знаю, поэтому форма не адаптируются к событию смены документа на 'Свид. о рождении'.
• Мне крайне не нравится стандартный "select", с помощью функционала Vue я изменил его на div с кликабельными span'aми
• Мобильной верстки - нет
• В пункте 'Верстка должна быть адаптивной' не указаны конкретные разрешения, поэтому я добавил для 1024х768, 1280х720, 1366х768, 1680х1050, 1920х1080, 2560х1440
• Проверка длины введенного номера - реализована
• Я умышленно не добавлял проверки на поля ввода серии и номера документа, возможно, будут регистрироваться граждане других стран и у них, возможно, будут буквенные значения в номере или серии