Валидация

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

Поведение валидаций и отображение ошибок реализовано в библиотеке React UI Validations.

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

1. Ограничьте выбор заведомо неверных значений: блокируйте эти или не показывайте.
2. Ограничьте ввод неподходящих символов. Если в поле нужно вводить только цифры, и это очевидно пользователю, игнорируйте ввод букв вместо того, чтобы показать ошибку. Используйте маски в полях, где у значений известен формат.
3. Пишите подсказки для заполнения формы. Например, плейсхолдер в полях ввода.

Валидация на только что открытой пустой форме запрещена.

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

Существует три вида валидаций:

1. мгновенная,
2. при потере фокуса,
3. при отправке формы.

Чем раньше интерфейс сообщает об ошибке, тем лучше — пользователю проще вернуться и исправить ошибку.

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

Поэтому в наших интерфейсах есть только два вида валидации:

1. при потере фокуса — основной вид валидации,
2. при отправке формы — когда валидация при потере фокуса невозможна.

По умолчанию используйте вид валидации при потере фокуса.

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

Текст ошибки появляется в тултипе, когда поле в фокусе:

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

Красная подсветка пропадает, когда пользователь начал исправлять ошибочное значение.

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

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

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

При прокрутке к первому полю от верхней границы окна до ошибочного поля остается отступ 48px — шесть модулей.

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

Как только заполнены обязательные поля — кнопка становится активной. Если после этого пользователь удалил значение в одном из полей — кнопка снова должна стать неактивной.

Об ошибках можно сообщать двумя способами:

1. Красным текстом под полем или справа от него:

2. Текстом в тултипе:

Рекомендуется использовать тултипы. Они идут отдельным слоем, поэтому не раздвигают форму и легко размещаются, даже если поля расположены плотно.

Тултип с подсказкой появляется в двух случаях:

1. При наведении на поле с ошибкой
2. При фокусе на поле с ошибкой

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

Тултип исчезает, когда:

1. Курсор вне поля с ошибкой
2. Фокус не на поле с ошибкой

Тултип по наведению перекрывает тултип по фокусу.

Тултип появляться сверху или справа от контрола с ошибкой, так чтобы он не перекрывал полезную информацию:

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

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

Как только пользователь начал исправлять значение, красная подсветка поля исчезает.

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

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

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

На более сложных формах выводите сообщение об ошибке в тултипе.

Зависимые поля — это поля, значение которых зависит друг от друга.

Ошибки, которые связаны с нарушением зависимости полей, мы показываем после отправки формы. Например, ИНН и КПП. Если пользователь указал ИНН из 10 цифр, а поле с КПП оставил пустым, после отправки формы пустое поле с КПП будет подсвечено.

Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей.

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

Есть форма из 5 полей:

• Название организации — простое текстовое, обязательное
• ИНН — 10 или 12 цифр, проверка контрольной суммы при потере фокуса, обязательное
• КПП — 9 цифр с проверкой контрольной суммы при потере фокуса, обязательное, если ИНН состоит из 10 цифр
• Электронная почта — адрес почты, проверка при потере фокуса по маске, необязательное
• Телефон — международный формат, проверка при потере фокуса по маске +00000000000, обязательное

Пользователь пропустил поле с названием организации, заполнил ИНН значением из 10 цифр, перешел в поле почты, указал некорректный адрес, перешел в поле с телефоном и указал некорректный номер, но из поля пока не ушел:

Пользователь навел курсор на поле с почтой, появился тултип. Но исправлять значение пользователь не стал:

Пользователь нажал кнопку «Отправить» — фокус перешел в поле «Название организации», так как оно обязательное и незаполненное:

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

Пользователь начинает вводить название организации, подсветка поля гаснет, а текст подсказки остается:

Заполнил название организации, перешел в поле ИНН:

Понял, что ИНН правильный, и нужно заполнить КПП:

Начал заполнять поле КПП. Красная рамка у ИНН и КПП исчезла — пользователь изменил значение в одном из зависимых полей:

Заполнил КПП, перешел в следующее поле:

Исправил почту, перешел в следующее поле:

Исправил телефон, кликнул за пределами поля:

Теперь при нажатии кнопки «Отправить» все будет хорошо.

Реализованный пример этой формы можно посмотреть в библиотеке валидаций.