Try It Yourself: Applying Validation
Watch the video below and learn how easy it is to apply validation to your form.
Try it Yourself
Use the following steps to make a make field required:
- Click the Date Attending field in the Form Outline panel.
- Click the
'expand' icon to expand the Field Validation Setting section of the Properties panel.
- To make the field required, simply change the value of the Required property to true.
- A red asterisk * displays next to the field to show that it's required.
That's all that is needed to make a field required.
Next, lets add another field so we can look at how to enforce a specific format using validation.
- Right-click the 'Name' field in the Live Edit Preview panel, then choose Insert New Form Element > Text Field.
- In the Properties panel, change the Field Name to 'Phone Number.'
- Click the
'expand' icon to expand the Field Validation Setting section of the Properties panel.
- Change the value of the Required property to true to make the field required.
- Locate the Validation property, then expand the values drop down to select the desired validation criteria.
- Choose Phone Number from the list of available options.
We've now made a couple of fields required, and we're enforcing phone number formatting on the newly added 'Phone Number' field.
Now, let's preview our form to see how it looks.
- Click the Preview/Launch button in the top toolbar to preview the form.
- Without entering anything in the form, click the Submit button.
- The fields marked as required are outlined in red.
- Rolling over the
'validation error' icon displays a clear explanation of what is expected and how to fix it.
- Enter 'ABC' in the Phone Number field.
- The error message updates to provide actionable feedback.
- The error message updates to provide actionable feedback.
- Enter a name in the Name field, and a properly formatted 10-digit phone number in the Phone Number field.
- Note that the red
'validation error' icon changes to a
green checkmark to let the user know the value the entered is now properly formatted.
- Note that the red
It's that simple to apply clear and effective validation to your forms.
Have more questions? Submit a request
Please sign in to leave a comment.
0 Comments