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

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

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

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

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

Создание и валидация Form включают следующие шаги:

1. Добавление полей ввода
2. Добавление проверок
3. Добавление действия валидации

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

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

1. Сначала добавьте сам виджет Form из раздела Form Elements.
2. Внутри формы добавьте виджет Column из вкладки Layout Elements.
3. Теперь добавьте два виджета TextField (один для электронной почты и один для пароля).
4. Добавьте виджет Button и затем действие Date/Time Picker, чтобы получить дату рождения.
5. Добавьте ещё одну кнопку Button для валидации и отправки формы.

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

2. Добавление проверок

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

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

1. Выберите виджет Form и перейдите в раздел Properties Panel > Validate.
2. Определите TextField, к которому хотите добавить валидацию, и отметьте галочку справа.
   1. В поле ввода Error Message укажите сообщение, которое будет отображаться (под TextField), если пользователь оставит поле TextField пустым.
   2. Вы также можете указать Min Required Character и Max Allowed Characters.
      1. Min Required Character: Это минимальное количество символов, необходимое для прохождения валидации. Например, если вы укажете значение 9, а пользователь введёт a@a.com (что составляет 6 символов), валидация не пройдёт, и будет отображено сообщение об ошибке.
         1. В поле ввода Error Text для Minimum Character укажите сообщение, которое будет отображаться, если пользователь не введёт минимально необходимое количество символов.
      2. Max Allowed Characters: Это максимальное количество символов, допускаемое для прохождения валидации. Например, если вы укажете значение 15, а пользователь введёт пароль, превышающий 15 символов, валидация не пройдёт, и будет отображено сообщение об ошибке.
         1. В поле ввода Error Text для Max Allowed Characters укажите сообщение, которое будет отображаться, если пользователь введёт больше максимального количества символов.

3. Вы также можете выбрать валидацию ввода с помощью наших предопределённых валидаторов или создать собственный. Для этого установите Text Validator в нужный вариант.

   1. Если требуемая валидация отсутствует в списке, вы можете выбрать Custom Regex и указать свой Regex (Dart/JS). Вот несколько примеров Custom Regex:

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

   2. Также укажите сообщение в Invalid Text Error Text. Оно будет отображаться, если валидация для Custom Regex не пройдёт.

4. Вы также можете добавить валидацию для определённых действий, которые используются внутри формы, таких как Date/Time Picker и PlacePicker. Для этого найдите имя действия и отметьте галочку справа.
   1. Теперь вы должны включить Add Action on Error и установить Action Type в подходящий вариант. Это действие сработает, если валидация не пройдёт. Например, в этом случае, если форма отправляется без выбора даты рождения, вы можете добавить действие Show Snackbar с запросом к пользователю выбрать дату.

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

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

1. Выберите Widget (например, Container, Button и т. д.), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
3. Найдите и выберите действие Validate Form (в разделе Widget/UI Interactions).
4. Установите Select Form to Validate в имя вашей Form.
5. Вы можете связать следующее действие, которое сработает, если валидация пройдёт.

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

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

Чтобы включить автоматическую валидацию формы, выберите TextField > перейдите в Properties Panel > Add validations > и затем включите Automatically Validate.

Валидация формы при отправке TextField

Вы также можете валидировать форму после завершения ввода значения в TextField с помощью действия On Submit.

Чтобы валидировать форму при On Submit TextField:

1. Выберите виджет TextField и выберите Actions в панели свойств.
2. Нажмите кнопку + Add Action и убедитесь, что Type of Action установлено в On Submit.
3. Найдите и выберите действие Validate Form (в разделе UI Interactions).
4. Установите Select Form to Validate в имя вашей Form.

---

Видеоурок

Если вы предпочитаете видеоурок, вот он для вас: