Проверка формы

Чтобы проверять введённое, поля ввода оборачивают в виджет Form. Он проверяет данные и показывает сообщения там, где условия не выполнены.

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

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

Разберём на примере формы регистрации. Вот что получится:

Работа делится на три шага:

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

1. Поля ввода

Проверять форме нечего, пока в ней нет полей. Собираем форму регистрации:

1. Добавьте виджет Form из раздела Form Elements.
2. Внутрь положите Column из Layout Elements.
3. Добавьте два TextField — под адрес почты и пароль.
4. Добавьте кнопку с действием Date/Time Picker для даты рождения.
5. Добавьте вторую кнопку — она будет проверять и отправлять форму.

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

2. Правила проверки

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

Добавленные поля появляются в свойствах виджета Form:

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

3. Кроме длины есть готовые проверки — они выбираются в Text Validator.

   1. Если подходящей нет, выберите Custom Regex и задайте своё регулярное выражение в Regex (Dart/JS). Например:

      Что проверяем	Регулярное выражение (Dart/JS)
      IP-адрес (например, 192.168.1.1)	^\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}$
      Время в 24-часовом формате (например, 13:45)	^([01]?[0-9]

   2. Текст ошибки для своего выражения задаётся в Invalid Text Error Text.

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

3. Действие Validate Form

Как добавить действие:

1. Выделите виджет — контейнер, кнопку или другой.
2. В панели свойств справа выберите Actions. Если действие первое, нажмите + Add Action; иначе — «+» под предыдущим действием и Add Action.
3. Найдите действие Validate Form (раздел Widget/UI Interactions).
4. В Select Form to Validate укажите вашу форму.
5. Следом можно добавить действие, которое выполнится при успешной проверке.

Автоматическая проверка

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

Выделите TextField, откройте Properties Panel > Add validations и включите Automatically Validate.

Проверка по On Submit

Форму можно проверять в момент, когда пользователь заканчивает ввод в поле, — по действию On Submit.

Порядок действий:

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

---

Видео

Если удобнее посмотреть: