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:

1.  Click the Date Attending field in the Form Outline panel.
    
2.  Click the  'expand' icon to expand the Field Validation Setting section of the Properties panel.
    
3. 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. 

1. Right-click the 'Name' field in the Live Edit Preview panel, then choose Insert New Form Element > Text Field.
    
2. In the Properties panel, change the Field Name to 'Phone Number.'
    
3. Click the  'expand' icon to expand the Field Validation Setting section of the Properties panel.
    
4. Change the value of the Required property to true to make the field required.
    
5. Locate the Validation property, then expand the values drop down to select the desired validation criteria.
    
6. 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.

1.  Click the Preview/Launch button in the top toolbar to preview the form. 
    
2. 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. 
      
3. Enter 'ABC' in the Phone Number field.
   • The error message updates to provide actionable feedback. 
      
4. 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. 

It's that simple to apply clear and effective validation to your forms.