# Validation ## **Принципы** Задача дизайнера — сделать так, чтобы пользователь не совершил ошибку и валидация не понадобилась, для этого: 1. Ограничьте выбор заведомо неверных значений в списке: блокируйте эти значения или не показывайте в списке. 2. Ограничьте ввод неподходящих символов. Если в поле нужно вводить только цифры, и это очевидно пользователю, игнорируйте ввод букв вместо того, чтобы показать ошибку. Используйте маски в полях, где у значений известен формат. 3. Пишите подсказки для заполнения формы. Например, плейсхолдер в полях ввода. В сложных интерфейсах, которыми часто пользуются, хорошо использовать скрытые подсказки: добавить рядом с полем иконку или изображение и показывать подсказку по наведению на него. Тогда человеку, который уже освоил интерфейс, подсказки не будут мешать, а новичок всегда сможет прочитать, что происходит. {% hint style="danger" %} Валидация на только что открытой пустой форме запрещена. Исключение — черновики, когда пользователь уже заполнял эту форму, через какое-то время вернулся к ней, а она заполнена с ошибками. {% endhint %} ## **Виды валидации** 1. Мгновенная 2. При потере фокуса 3. При отправке формы (по кнопке) {% hint style="info" %} Чем раньше интерфейс сообщает об ошибке, тем лучше — пользователю проще вернуться и исправить ошибку {% endhint %} Следует разделять валидацию на серверную и клиентскую. Тип валидации настраивается разработчиком на конкретном проекте. Чаще всего серверная валидация требуется для проверки на уникальность вновь добавляемого значения, когда требуется сравнение вводимого результата со всем пулом имеющихся в БД данных. Такая валидация должна осуществляться по нажатию соответствующей кнопки интерфейса или использованию кнопки "Enter", Данное действие отправляет запрос на сервер, валидация осуществляется на стороне сервера и интерфейс (клиент) получает и выводит готовый результат валидации, например, сообщение о невалидности, либо, наоборот, валидность результата. В этом случае необходимо обязательно предусмотреть соответствующие элементы интерфейса - не только поле для валидации, но и кнопку, по которой осуществляется запрос. За одно нажатие управляющей кнопки может проверятся валидность нескольких полей, если этого требует сценарий. Т.е. отправляться несколько запросов на сервер. Если требуется валидация по корректности формата или типа значения, как правило данную проверку возможно осуществить сразу же, по окончании (/по мере) ввода значения пользователем, т.е., буквально, мгновенно. без нажатия дополнительных кнопок - при потере фокуса на поле или непосредственно по мере ввода значения, в зависимости от требований к валидации и пользовательского сценария. ### **Мгновенная валидация** Самый быстрый способ сообщить об ошибке — мгновенная валидация. Она возможна только в тех случаях, когда в процессе ввода понятно, что значение некорректное. Обычно такие ошибки связаны с неправильной раскладкой клавиатуры (кириллица вместо латиницы) или вводом букв в цифровое поле (ID, номер заявки и др.) Для этих случаев мы используем поля с масками: ввод неподходящих символов в них заблокирован. Поэтому в наших интерфейсах чаще всего встречаются два другие вида валидации: * по потере фокуса — основной вид валидации * по отправке формы — для тех случаев, когда валидация по потере фокуса невозможна. ### **Валидация после потери фокуса** #### **Когда использовать** Этот вид валидации подходит для большинства случаев. #### **Как работает** Пользователь заполняет поле и переходит к следующему. В этот момент поле уходит из фокуса, и, если оно заполнено, срабатывает валидация. Валидация срабатывает сразу после потери фокуса, если значение в поле заполнено или в нём ошибка. Если найдена ошибка, поле подсвечивается зарезервированным для ошибок цветом. Фокус в это поле автоматически не возвращается. {% hint style="danger" %} Не валидируйте поля на пустоту по потере фокуса — не показывайте ошибку если поле не заполнено, возможно пользователь вернется и заполнит поле чуть позже. Показывать ошибку в таких случаях можно только после отправки формы. {% endhint %}

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

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

### **Валидация при отправке формы** #### Когда использовать Используйте этот вид валидации, когда нельзя проверить поля по потере фокуса. Например, для проверки заполнения обязательных полей. #### Как работает Проверка происходит после того, как пользователь нажал кнопку отправки данных: все поля с ошибками на форме подсвечиваются, страница прокручивается к первому полю с ошибкой, фокус перемещается в это поле, курсор встает в конец строки, рядом с полем появляется тултип с подсказкой. При прокрутке к первому полю от верхней границы окна до ошибочного поля остается отступ 50 px. ## **Блокирование кнопки отправки** В небольших формах вместо проверки заполнения обязательных полей можно блокировать кнопку отправки формы. Используйте это поведение, когда очевидно, почему кнопка отправки формы неактивна. Например, на форме авторизации. Как только заполнены все обязательные поля — кнопка становится активной. Если после этого пользователь стер значение в одном из полей — кнопка снова должна стать не активной. ## **Сообщения об ошибках** Если в поле ошибка, его нужно подсветить: выделить цветом или как-то ещё, чтобы пользователь явно видел, что нужно исправить. Иногда этого достаточно, но обычно нужно рассказать об ошибке в явном виде — в **тултипе** или **подсказке** рядом с полем. Об ошибках можно сообщать двумя способами, например, тултип или подсказка:

Или цветом зарезервированного текстом ошибки около поля, обычно под полем:

{% hint style="info" %} Из этих двух способов мы рекомендуем использовать тултипы. Они идут отдельным слоем, поэтому не раздвигают форму и легко размещаются, даже если поля на форме расположены плотно. {% endhint %} ## **Тултипы** ### Как работают Тултип с подсказкой появляется в двух случаях: 1. При наведении на поле с ошибкой. 2. Когда поле с ошибкой получает фокус. \ Тултип исчезает, когда: 1. Курсор вышел из области поля с ошибкой. 2. Поле с ошибкой потеряло фокус. Тултип может появляться сверху или справа от контролла с ошибкой, так чтобы он не перекрывал полезную информацию:

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

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

### В чём ошибка Обязательно в явном виде скажите пользователю, в чём ошибка: * В формате данных, которые он вводит в поле (не добавил @ в адрес электронной почты) * В самих данных (ввел пароль или логин, которых не существует)


✖️ Неправильно	Логин не подходит	Непонятно, ошибка в формате или что-то не так с самим логином.
✖️ Неправильно	Логин не подходит	Непонятно, ошибка в формате или что-то не так с самим логином


✔️ Правильно	Напишите телефон в формате +7 000 000 00 00	Сразу понятно, что ошибка в формате, а ещё есть подсказка, как должно быть. Можно сравнить и быстро найти ошибку
✔️ Правильно	Такого номера нет в списке. Проверьте, пожалуйста	C форматом всё ок, человек просто перепутал номер.
✔️ Правильно	Этот логин уже занят или Пользователя с таким логином нет	C форматом всё в порядке, нужно искать другой логин
✔️ Правильно	В логине должно быть 20 цифр, три буквы и хотя бы одно тире	Нужно разбираться с форматом

## **Валидация зависимых полей** Зависимые поля — это поля, значение которых зависит друг от друга. Требуется их совместная проверка. Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей. Если пользователь что-то вводит в поле и мы понимаем, что значение не совпадает с форматом, нужно сразу подсвечивать и подсказывать, что где-то ошибка. Например, "Тип данных" и "Дискретный набор". Если пользователь указал "тип данных" = дискретное, а поле с "Дискретным набором" оставил пустым, после отправки формы пустое поле с выбором дискретного набора будет подсвечено. {% hint style="warning" %} Важное допущение для описания: если поле обязательное, то пока его не заполнили кнопка **"Сохранить"** будет недоступна для нажатия {% endhint %} Есть форма из 5 полей:

1. Пользователь пропустил поле **Название организации**. 2. Заполнил поля **Имя** и **Фамилия**. 3. В поле **Электронная почта** указал адрес в неправильном формате. 4. Перешёл в поле **Телефон**, указал номер в неправильном формате, но из поля пока не вышел. Вот что он видит:

Пользователь навёл курсор на поле с почтой. Появился тултип с сообщением об ошибке. Но данные пока не исправлены. Что он видит:

Пользователь нажал **Сохранить**. Фокус перешёл в поле **Организация**, так как оно обязательное. Рядом с полем появился тултип с сообщением об ошибке. Другие поля с ошибками продолжают подсвечиваться.

Пользователь начинает вводить текст в поле **Организация**. Подсветка, которая показывает, что в поле ошибка, пропадает. Тултип с подсказкой остаётся.

Пользователь заполнил поле **Организация**. Фокус переведён на следующее неверно заполненное поле.

Пользователь исправил поле **Электронная почта** (тултип с сообщением об ошибке исчез). Перешёл к следующему.

Теперь по нажатию кнопки «**Сохранить**» все будет хорошо. PS.Стиль кнопок, полей и прочих элементов нужно смотреть на их страница/гайдлайне. ## **Валидация обязательных полей на нескольких вкладках** В случае, если обязательные для заполнения поля располагаются на двух вкладка, вы можете показать наличие этих полей с помощью \* в заголовке наименования вкладки.

{% hint style="info" %} Самое лучше решение – избегать такой конструкции формы/страницы/экрана , когда обязательные для заполнения поля располагаются на разных вкладках. {% endhint %} ## Полезные ссылки {% embed url="" %} {% embed url="" %} {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://prizmds.gitbook.io/documentation/guidelines/validation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.