For example, you could use it to check if a user has given a valid email and password. This makes it easy to handle user input and ensure that the data is correct before it is submitted to the server or stored locally.
Let's see how to add a Form widget by building a signup example. Here's how it looks:
Validating input fields in a signup form
Building and validating a Form includes the following steps:
A form widget can only validate if there are any input fields. Here's an example of adding input fields for the signup form.
- 1.First, add the Form widget itself from the Form Elements.
Here's how it looks:
Validation refers to the process of checking user input for correctness and ensuring that it meets certain criteria or requirements. This can include checking for the presence of required fields, verifying that a value is within a certain range or format, or validating against the custom pattern.
After adding input fields, they will be available to be validated using the form widget properties. Here's how you do it:
- 1.Select the Form widget, and move to the Properties Panel > Validate section.
- 2.Identify the TextField on which you would like to add the validation and tick the box on the right side.
- 1.Inside the Error Message input box, provide the message that will be displayed (below the TextField) if a user leaves the TextField empty.
- 2.You can also specify the Min Required Character and Max Allowed Characters.
- 1.Min Required Character: This is the minimum character required for the validation to pass. For example, If you provide a value as 9 and a user enters the value as [email protected] (which is 6 characters), then the validation fails, and an error message will be displayed.
- 1.Inside the Minimum Character Error Text input box, provide the message that will be displayed if a user doesn't provide the min required characters.
- 2.Max Allowed Characters: This is the maximum number of characters allowed for the validation to pass. For example, If you provide a value of 15 and a user enters a password that exceeds 15 characters, then the validation fails, and an error message will be displayed.
- 1.Inside the Max Allowed Characters Error Text input box, provide the message that will be displayed if a user enters more than the maximum allowed characters.
Basic TextField validation
- 4.You can also choose to validate the input using our predefined validators or by creating the custom one. To do so, you can set the Text Validator to the one you need.
- 1.If the required validation is not on the list, you can select Custom Regex and specify your own Regex (Dart/JS). Here are some examples of Custom Regex:
- 2.Also, provide a message in Invalid Text Error Text. This will be displayed If validation for the Custom Regex fails.
- 5.You can also add validation on certain actions that can be used inside the form, such as Date/Time Picker and PlacePicker. To do so, find the action name and tick the box on the right side.
- 1.Now you must enable Add Action on Error and set the Action Type to the appropriate one. This will be triggered if the validation fails. For example, in this case, if a form is submitted without selecting the birth date, you can add a Show Snackbar action asking a user to select the date.
Validating Date/Time picker
Learn how to add an action to validate a form on the following page.
Rather than displaying an error message after the user submits the form, you can provide real-time feedback as they type in the TextField widget to indicate validation errors. This feature can be particularly useful for lengthy forms where it can save the user's time and effort.
To auto validate a form, select TextField > move to the Properties Panel > Add validations > and then enable the Automatically Validate.
Enabling auto validate
You can also validate a form when you are done entering a value inside the TextField using the On Submit action.
Validating a Form on TextField On Submit
To validate a form on TextField On Submit:
- 2.Click + Add Action button, and ensure that the Type of Action is set to On Submit.
- 3.Search, and select the Validate Form (under UI Interactions) action.
- 4.Set the Select Form to Validate to your Form name.
Validating a Form on TextField On Submit
If you prefer watching a video tutorial, here's the one for you:
Last Updated Date: September 5, 2023