Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Когда помечать ошибками в формах

Проблема даже кажется надуманной – когда помечать ошибки в формах. Только вот подход – “Когда есть ошибка тогда и помечай” не особенно хорошо работает, ибо подход “в лоб” по этому совету очень быстро приведет к непонятному поведению интерфейса.

Приведу пример: у вас форма с обязательными полями, скажем поле с электро-почтой обязательно нужно заполнить. Кстати, сразу тут имеет смысл посмотреть как проверять email адрес на корректность, но сейчас не будем подробно на этом останавливаться. Вернемся к обязательному заполнению – кажется, что проверка очень простая: если поле пустое, то значит ошибка и помечаем его красным. Однако, когда пользователь зашел на страницу с формой – то она будет пустой, он ведь ее не заполнял – в этом случае помечаем красным? Конечно нет, воскликнет бывалый читатель, меня же за такое менеджеры повесят! Значит красным нужно пометить, только если поле осталось незаполненным и пользователь решил отправить форму?

Да, валидировать форму по нажатию на “отправить” можно, но есть способ лучше. Давайте о нем-то и поговорим. В чем суть примера: есть поле, в которое нужно ввести электро-почту, поле обязательное, так же очень хочется, чтобы валидировался ввод и если почта не валидна, но информируем об этом пользователя. Я предлагаю следующий сценарий:

input-error-01

Поле ввода не валидируется, пока пользователь не нажмет на кнопку “Send”, либо пока не нажмет “Enter”. После попытки отправить данные, если поле было не валидно, то оно будет подсвечено красным и данные формы не будут отправлены.

input-error-02

После того, как поле провалидировалось в первый раз, то включается “автоматическая валидация”. То есть при каждом изменении данных в поле – пользователь будет проинформирован (как минимум цветом поля) о том верны ли введенные данные.

input-error-03

При таком подходе пользователь спокойно заполнять все данные, в то же время, когда в форме будут ошибки то механизм валидации будет точечно проверять все инпуты, чтобы быть уверенным, что данные введены корректно.

Поделиться:
comments powered by Disqus