Form
The Form widget allows you to validate the user input and display a message if validation fails. For example, you can use a Form widget to check if a user has given the email and password combination.
Let's build a basic example of a signup form that looks like below:
Building and validating a Form includes the following steps:
Here's an example of building a page that contains the signup form:
- First, drag the Form widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
To add validation on a Form:
- Select the Form widget from the widget tree or from the canvas area.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Validation section.
- Identify the TextField on which you would like to add the validation and checkmark the box on the right side.
- Inside the Error Message input box, provide the message that will be displayed below the TextField if a user leaves the TextField without entering anything inside.
- Inside the Min Required Character, enter the number. This is the minimum character required for the validation to pass. For example, If you provide a value as 9 and a user enters value as [email protected] (which is 6 characters) then the validation fails and an error message will be displayed.
- Inside the Minimum Character Error Text input box, provide the message that will be displayed if a user doesn't provide the required characters.
- To add validation on actions such as Date/Time Picker, PlacePicker, etc, find the action name and checkmark the box on the right side.
- Checkmark the Add Action on Error. This will perform an action if a user has not specified the value.
- Select the Action Type to Show Snack Bar. You can also choose to show the Alert Dialog for the error message.
- Under the Snack Bar Message Section, Inside the Value input box, specify the message you would like to appear on the snack bar.
- Find the Background Color property, click on the box next to Unset, select any dark/light color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
- Similarly, find the Text Color property and set the color.
You can add an action to validate a form by visiting the following page:
Instead of showing an error message when the user submits the form, you can let them know about the error as they type inside the TextField widget if the validation fails. This becomes really helpful if you are presenting a long form to users.
To auto validate a form:
- Select the Form widget from the widget tree or from the canvas area.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Validation section.
- Checkmark the Automatically Validate property (click on it).
You can also validate a form when you are done entering a value inside the TextField using the On Submit action.
To validate a form on TextField On Submit:
- Select the TextField widget from the widget tree or from the canvas area.
- Click + Add Action button
- Select the On Submit.
- Select the Action Type as Validate Form.
- Set the Select Form to Validate to your Form name.
Last modified 1mo ago