Skip to main content

7 - Валидация форм

Валидация форм

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

https://youtu.be/RXxzpK7hFck

Когда использовать

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

Включение валидации

Чтобы включить валидацию, выберите виджет и отметьте галочку «Обязательно» (Required) в разделе «Данные и валидация» (Data & Validation) на панели свойств. Для определённых типов виджетов вы также можете установить требуемый шаблон ввода. Чтобы изменить это, нажмите на кнопку «Без валидации» (No Validation) и выберите тип шаблона, который разрешён.

Обратная связь для пользователя

Конечно, просто проверять ввод недостаточно. Если данные введены неверно, необходимо дать пользователю обратную связь. В Quant-UX это можно сделать двумя способами. Во-первых, вы можете определить специальный стиль ошибки для случая некорректного ввода и настроить внешний вид виджета, если данные неверны. Например, граница поля ввода может стать красной. Во-вторых, вы можете указать так называемую метку ошибки (error label), которая будет отображаться, если пользователь ввёл неверные данные.

Блокировка навигации

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