Валидация

Валидация — это проверка значений, указанных пользователем, и отображение найденных ошибок.

Задача дизайнера — обойтись без валидации. Позаботьтесь о том, чтобы пользователь не мог совершить ошибку и валидация не понадобилась вообще, для этого:

  1. Ограничьте выбор заведомо неверных значений в списке.
  2. Ограничьте ввод неподходящих символов.
  3. Используйте маску для ввода значений с особым форматированием.

Сообщения об ошибках

Сообщения на странице

Если на странице с формой достаточно места для текста ошибки, выводите этот текст прямо под полем.

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

Баллуны

Если места для текста ошибок не хватает, используйте баллуны.

Виды валидации

По потере фокуса — появляется сразу после потери фокуса. Ошибочное поле подсвечивается, и рядом возникает текст подсказки. Фокус в это поле автоматически не переходит.

Обычная — появляется после отправки формы. Все поля с ошибками на форме подсвечиваются, страница прокручивается к первому полю с ошибкой, фокус перемещается в это поле. Если вы используете баллуны, то рядом с первым ошибочным полем возникает баллун. Если вы используете тексты на странице, они появятся под всеми полями одновременно. При прокрутке к первому полю оставляйте отступ 50 пикселей сверху от верхней границы окна до ошибочного поля.

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

Рассмотрим пару случаев, из которых ясно, что мгновенная валидация не нужна:

  1. Если пользователь вводит значение в неверной раскладке и не смотрит на экран при вводе, мгновенная валидация не спасет его от ввода в неверной раскладке, он ее просто не увидит. А если смотрит, то и сам обнаружит, что раскладка не та. К тому же, у него может быть установлен Punto Switcher, и он сам исправит раскладку после ввода.
  2. Если в поле нужно вводить только цифры, а пользователь ввел букву, скорей всего это не намеренный ввод, пользователь промахнулся. Надо игнорировать ввод букв в этом случае вместо показа валидации.

Если известно, что пользователи часто совершают одну и ту же ошибку при вводе, напишите подсказку к полю, не решайте этот вопрос мгновенной валидацией.

Какой вид валидации использовать

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

Валидация по потере фокуса на незаполненное поле или на невыбранное значение запрещена. Проверка на обязательность должна происходить только после отправки формы. У пользователя должна быть возможность произвольно перемещаться между полями на форме и заполнять их в любом порядке, при этом валидация не должна возникать.

Снимайте подсветку с поля, как только пользователь начал исправлять ошибочное значение. При этом текстовое сообщение об ошибке оставляйте до тех пор, пока исправленное поле не потеряет фокус:

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

Помечать обязательные поля на форме излишне. Стремитесь к тому, чтобы как можно больше полей на форме были необязательными для заполнения. Обязательное заполнение длинных форм — боль для пользователя. Оставьте обязательными лишь те поля, которые пригодятся сразу же после этого, остальное оставьте на потом. Например, запросите заполнение оставшихся полей в момент отправки отчетности. Пользователи охотней заполняют поля, когда понимают, для чего они сейчас, а не когда-то потом.

Поведение баллунов

Баллун с подсказкой появляется в трех случаях:

  1. При наведении на поле с ошибкой,
  2. Когда поле с ошибкой получает фокус,
  3. Когда срабатывает валидация по потере фокуса.

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

Пример

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

При потере фокуса или наведения с ошибочного поля баллун исчезает.

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

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

Тексты ошибок

Текст ошибки должен помогать пользователю ввести или выбрать верное значение, а не просто сообщать об ошибке. В подсказках для текстовых полей с ошибкой нужно избегать слов «укажите», «заполните», «введите». Лучше писать, зачем поле нужно заполнить, каким должно быть значение.

Поле ввода

Поле ввода с ошибкой выделяйте красной рамкой:

Когда поле с ошибкой оказывается в фокусе, рядом появляется баллун. Текст под полем показывайте, пока значение в поле не исправлено:

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

Для полей, схожих с полем ввода, вид и поведение при возникновении ошибок аналогичные:

Раскрывающийся список

Варианты, которые нельзя выбрать в списке, должны быть заблокированы. Поэтому валидация указывает только на обязательность выбора хотя бы одного значения из списка. Провалидированный раскрывающийся список выделяется красной рамкой. Когда он в фокусе, рядом отображается баллун. Текст подсказки показывайте, пока в списке не будет выбрано одно из значений:

Чекбоксы

Как и в случае с раскрывающимся списком, валидация на группе чекбоксов указывает лишь на обязательность выбора хотя бы одного варианта. Чекбоксы с валидацией выделяются красной рамкой. Если заголовок группы чекбоксов находится слева, располагайте баллун над группой чекбоксов. Если заголовок группы сверху, выводите баллун справа, напротив первого чекбокса. Он отображается при наведении на группу чекбоксов.

Если текст сообщения об ошибке выводится прямо на странице, а заголовок группы находится слева, текст валидации располагайте под группой чекбоксов. Если заголовок группы находится над группой чекбоксов, текст ошибки располагайте сразу под заголовком группы:

Радиобаттоны

Поведение точно такое же, как в чекбоксах. С баллунами:

С текстом ошибки на странице:

Ссылки

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

Некритичная валидация

Критичные валидации, которые были описаны выше, не позволяют сохранять страницы с ошибками. Некритичные валидации работают схожим образом, но с ними страницу можно сохранить. Внешне они отличаются лишь цветом выделения:

Некритичная валидация должна появляться по потере фокуса, не по сабмиту.