Validation
Валидация — это проверка значений, указанных пользователем, и отображение найденных ошибок. Указаны основные принципы валидации.
Принципы
Задача дизайнера — сделать так, чтобы пользователь не совершил ошибку и валидация не понадобилась, для этого:
Ограничьте выбор заведомо неверных значений в списке: блокируйте эти значения или не показывайте в списке.
Ограничьте ввод неподходящих символов. Если в поле нужно вводить только цифры, и это очевидно пользователю, игнорируйте ввод букв вместо того, чтобы показать ошибку. Используйте маски в полях, где у значений известен формат.
Пишите подсказки для заполнения формы. Например, плейсхолдер в полях ввода. В сложных интерфейсах, которыми часто пользуются, хорошо использовать скрытые подсказки: добавить рядом с полем иконку или изображение и показывать подсказку по наведению на него. Тогда человеку, который уже освоил интерфейс, подсказки не будут мешать, а новичок всегда сможет прочитать, что происходит.
Валидация на только что открытой пустой форме запрещена.
Исключение — черновики, когда пользователь уже заполнял эту форму, через какое-то время вернулся к ней, а она заполнена с ошибками.
Виды валидации
Мгновенная
При потере фокуса
При отправке формы (по кнопке)
Чем раньше интерфейс сообщает об ошибке, тем лучше — пользователю проще вернуться и исправить ошибку
Следует разделять валидацию на серверную и клиентскую.
Тип валидации настраивается разработчиком на конкретном проекте.
Чаще всего серверная валидация требуется для проверки на уникальность вновь добавляемого значения, когда требуется сравнение вводимого результата со всем пулом имеющихся в БД данных. Такая валидация должна осуществляться по нажатию соответствующей кнопки интерфейса или использованию кнопки "Enter", Данное действие отправляет запрос на сервер, валидация осуществляется на стороне сервера и интерфейс (клиент) получает и выводит готовый результат валидации, например, сообщение о невалидности, либо, наоборот, валидность результата. В этом случае необходимо обязательно предусмотреть соответствующие элементы интерфейса - не только поле для валидации, но и кнопку, по которой осуществляется запрос.
За одно нажатие управляющей кнопки может проверятся валидность нескольких полей, если этого требует сценарий. Т.е. отправляться несколько запросов на сервер.
Если требуется валидация по корректности формата или типа значения, как правило данную проверку возможно осуществить сразу же, по окончании (/по мере) ввода значения пользователем, т.е., буквально, мгновенно. без нажатия дополнительных кнопок - при потере фокуса на поле или непосредственно по мере ввода значения, в зависимости от требований к валидации и пользовательского сценария.
Мгновенная валидация
Самый быстрый способ сообщить об ошибке — мгновенная валидация. Она возможна только в тех случаях, когда в процессе ввода понятно, что значение некорректное. Обычно такие ошибки связаны с неправильной раскладкой клавиатуры (кириллица вместо латиницы) или вводом букв в цифровое поле (ID, номер заявки и др.) Для этих случаев мы используем поля с масками: ввод неподходящих символов в них заблокирован. Поэтому в наших интерфейсах чаще всего встречаются два другие вида валидации:
по потере фокуса — основной вид валидации
по отправке формы — для тех случаев, когда валидация по потере фокуса невозможна.
Валидация после потери фокуса
Когда использовать
Этот вид валидации подходит для большинства случаев.
Как работает
Пользователь заполняет поле и переходит к следующему. В этот момент поле уходит из фокуса, и, если оно заполнено, срабатывает валидация.
Валидация срабатывает сразу после потери фокуса, если значение в поле заполнено или в нём ошибка. Если найдена ошибка, поле подсвечивается зарезервированным для ошибок цветом. Фокус в это поле автоматически не возвращается.
Не валидируйте поля на пустоту по потере фокуса — не показывайте ошибку если поле не заполнено, возможно пользователь вернется и заполнит поле чуть позже. Показывать ошибку в таких случаях можно только после отправки формы.
Текст ошибки появляется в тултипе, когда поле получает наведение или фокус:
Поле с ошибкой должно остаться подсвеченным, если оно получило фокус, его значение не исправляли, а затем оно потеряло фокус. Подсветка ошибки снимается с поля, как только пользователь начал исправлять ошибочное значение.
Поле может содержать краткую информацию, объясняющую условия невалидности. Это необязательное условие. Стоит учесть, что если планируется использовать информацию ниже поля поля, то при проектировании макетов стоит увеличить отступ до 20px и не нарушать общую ритмику.
Валидация при отправке формы
Когда использовать
Используйте этот вид валидации, когда нельзя проверить поля по потере фокуса. Например, для проверки заполнения обязательных полей.
Как работает
Проверка происходит после того, как пользователь нажал кнопку отправки данных: все поля с ошибками на форме подсвечиваются, страница прокручивается к первому полю с ошибкой, фокус перемещается в это поле, курсор встает в конец строки, рядом с полем появляется тултип с подсказкой.
При прокрутке к первому полю от верхней границы окна до ошибочного поля остается отступ 50 px.
Блокирование кнопки отправки
В небольших формах вместо проверки заполнения обязательных полей можно блокировать кнопку отправки формы. Используйте это поведение, когда очевидно, почему кнопка отправки формы неактивна. Например, на форме авторизации.
Как только заполнены все обязательные поля — кнопка становится активной. Если после этого пользователь стер значение в одном из полей — кнопка снова должна стать не активной.
Сообщения об ошибках
Если в поле ошибка, его нужно подсветить: выделить цветом или как-то ещё, чтобы пользователь явно видел, что нужно исправить. Иногда этого достаточно, но обычно нужно рассказать об ошибке в явном виде — в тултипе или подсказке рядом с полем.
Об ошибках можно сообщать двумя способами, например, тултип или подсказка:
Или цветом зарезервированного текстом ошибки около поля, обычно под полем:
Из этих двух способов мы рекомендуем использовать тултипы. Они идут отдельным слоем, поэтому не раздвигают форму и легко размещаются, даже если поля на форме расположены плотно.
Тултипы
Как работают
Тултип с подсказкой появляется в двух случаях:
При наведении на поле с ошибкой.
Когда поле с ошибкой получает фокус.
Тултип исчезает, когда:
Курсор вышел из области поля с ошибкой.
Поле с ошибкой потеряло фокус.
Тултип может появляться сверху или справа от контролла с ошибкой, так чтобы он не перекрывал полезную информацию:
Единообразие поведения и внешнего вида
Показывайте тултипы справа от полей. Eсли в этом случае они перекрывают важное содержимое на странице, выводите тултипы сверху. Придерживайтесь единообразия, но помните, что контент важнее него.
Подсказка
Подсказка с сообщением об ошибке появляется сразу, как только произошла валидация и поле с ошибкой подсветилось.
Текст ошибки можно вывести справа от поля, если на форме есть место, а само сообщение короткое. Так форму не придется раздвигать, чтобы показать ошибку.
Если справа от поля нет места для текста, выводите сообщение под полем. Лучше делать это как можно реже: новая строка не раздвигает форму в высоту, ритмика теряется, это может запутать пользователя.
В чём ошибка
Обязательно в явном виде скажите пользователю, в чём ошибка:
В формате данных, которые он вводит в поле (не добавил @ в адрес электронной почты)
В самих данных (ввел пароль или логин, которых не существует)
Логин не подходит
Непонятно, ошибка в формате или что-то не так с самим логином.
Логин не подходит
Непонятно, ошибка в формате или что-то не так с самим логином
Напишите телефон в формате +7 000 000 00 00
Сразу понятно, что ошибка в формате, а ещё есть подсказка, как должно быть. Можно сравнить и быстро найти ошибку
Такого номера нет в списке. Проверьте, пожалуйста
C форматом всё ок, человек просто перепутал номер.
Этот логин уже занят или Пользователя с таким логином нет
C форматом всё в порядке, нужно искать другой логин
В логине должно быть 20 цифр, три буквы и хотя бы одно тире
Нужно разбираться с форматом
Валидация зависимых полей
Зависимые поля — это поля, значение которых зависит друг от друга. Требуется их совместная проверка.
Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей. Если пользователь что-то вводит в поле и мы понимаем, что значение не совпадает с форматом, нужно сразу подсвечивать и подсказывать, что где-то ошибка.
Например, "Тип данных" и "Дискретный набор". Если пользователь указал "тип данных" = дискретное, а поле с "Дискретным набором" оставил пустым, после отправки формы пустое поле с выбором дискретного набора будет подсвечено.
Важное допущение для описания: если поле обязательное, то пока его не заполнили кнопка "Сохранить" будет недоступна для нажатия
Есть форма из 5 полей:
Пользователь пропустил поле Название организации.
Заполнил поля Имя и Фамилия.
В поле Электронная почта указал адрес в неправильном формате.
Перешёл в поле Телефон, указал номер в неправильном формате, но из поля пока не вышел.
Вот что он видит:
Пользователь навёл курсор на поле с почтой. Появился тултип с сообщением об ошибке. Но данные пока не исправлены.
Что он видит:
Пользователь нажал Сохранить.
Фокус перешёл в поле Организация, так как оно обязательное. Рядом с полем появился тултип с сообщением об ошибке.
Другие поля с ошибками продолжают подсвечиваться.
Пользователь начинает вводить текст в поле Организация.
Подсветка, которая показывает, что в поле ошибка, пропадает. Тултип с подсказкой остаётся.
Пользователь заполнил поле Организация.
Фокус переведён на следующее неверно заполненное поле.
Пользователь исправил поле Электронная почта (тултип с сообщением об ошибке исчез).
Перешёл к следующему.
Теперь по нажатию кнопки «Сохранить» все будет хорошо.
PS.Стиль кнопок, полей и прочих элементов нужно смотреть на их страница/гайдлайне.
Валидация обязательных полей на нескольких вкладках
В случае, если обязательные для заполнения поля располагаются на двух вкладка, вы можете показать наличие этих полей с помощью * в заголовке наименования вкладки.
Самое лучше решение – избегать такой конструкции формы/страницы/экрана , когда обязательные для заполнения поля располагаются на разных вкладках.
Полезные ссылки
Last updated
