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

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

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

Добавление виджета Form

Давайте посмотрим, как добавить виджет Form, создав пример регистрации. Вот как это выглядит:

Построение и проверка формы включает следующие шаги:

1. Добавление полей ввода

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

Сначала добавьте сам виджет Form из Элементов формы.
Внутри формы добавьте виджет Column из вкладки Элементы макета.
Теперь добавьте два Текстовых поля (одно для электронной почты и одно для пароля).
Добавьте виджет Кнопка, а затем добавьте действие Выбор даты/времени, чтобы получить дату рождения.
Добавьте еще одну Кнопку для валидации и отправки формы.

Вот как это выглядит:

Поля ввода

2. Добавление валидации

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

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

Выберите виджет Form и перейдите в раздел Свойства виджета > Валидация.
Определите Текстовое поле, к которому вы хотели бы добавить валидацию, и поставьте галочку справа.
1. В поле ввода Сообщение об ошибке укажите сообщение, которое будет отображаться (под Текстовым полем), если пользователь оставит Текстовое поле пустым.
2. Вы также можете указать Минимальное количество требуемых символов и Максимально допустимое количество символов.
  1. Минимальное количество требуемых символов: Это минимальное количество символов, необходимое для прохождения валидации. Например, если вы укажете значение как 9, а пользователь введет a@a.com (что составляет 6 символов), то валидация не пройдет, и будет отображено сообщение об ошибке.
    1. В поле ввода Текст ошибки минимального символа укажите сообщение, которое будет отображаться, если пользователь не предоставляет минимальное количество символов.
  2. Максимально допустимое количество символов: Это максимальное количество символов, допустимое для прохождения валидации. Например, если вы укажете значение 15, а пользователь введет пароль, превышающий 15 символов, то валидация не пройдет, и будет отображено сообщение об ошибке.
    1. В поле ввода Текст ошибки максимального числа символов укажите сообщение, которое будет отображаться, если пользователь вводит более максимально допустимого количества символов.
Вы также можете выбрать вариант валидации ввода с помощью наших предопределенных валидаторов или создать собственный. Для этого установите Валидатор текста на необходимый.
1. Если необходимой валидации нет в списке, вы можете выбрать Пользовательский Regex и указать свой собственный Regex (Dart/JS). Вот некоторые примеры Пользовательского Regex:
  
  Примеры Regex (Dart/JS)
  IP-адрес (например, 192.168.1.1) ^\d3.\d3.\d3.\d3$
  Время в 24-часовом формате (например, 13:45) ^([01]?[0-9]
2. Также укажите сообщение в Недопустимом тексте ошибки. Это будет отображаться, если валидация для Пользовательского Regex не пройдет.
Вы также можете добавить валидацию на определенные действия, которые могут использоваться внутри формы, такие как Выбор даты/времени и Выбор местоположения. Для этого найдите название действия и поставьте галочку справа.
1. Теперь вам нужно включить Добавить действие при ошибке и установите Тип действия в соответствующий. Это будет запущено, если валидация не пройдет. Например, в этом случае, если форма отправляется без выбора даты рождения, вы можете добавить действие Показать Snackbar, попросив пользователя выбрать дату.

Примеры	Regex (Dart/JS)
IP-адрес (например, 192.168.1.1)	^\d3.\d3.\d3.\d3$
Время в 24-часовом формате (например, 13:45)	^([01]?[0-9]

Валидация выбора даты/времени

3. Добавление действия валидации

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

Выберите Виджет (например, Container, Button и т. д.), к которому вы хотите добавить действие.
Выберите Действия из панели свойств (правое меню). Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (внутри Редактора действий) и выберите Добавить действие.
Найдите и выберите действие Валидация формы (в разделе Виджет/Взаимодействие с пользовательским интерфейсом).
Установите Выберите форму для проверки на имя вашей Формы.
Вы можете цеплять следующее действие, которое будет запущено, если валидация пройдет.

Автоматическая валидация

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

Чтобы автоматически валидировать форму, выберите Текстовое поле > перейдите в Панель свойств > Добавить валидации > и затем активируйте Автоматически валидировать.

Активация автоматической валидации