Form validation is used when you run the Submit form action of an Input Form App, the form will go through each of its fields and check the users input against the following settings:
- Format Validation
- Required fields
If the value of a field is either not valid against format validation or is empty and is a required field, the form will not submit and will instead show error messages, and possibly an outline of the invalid fields. Find out all about it in the topics below.
Format Validation
Format validation is a setting that is available on Input fields and serves to determine if the user’s input follows a certain pattern or criteria.
Input fields can be used either inside an Input Form App or from the tools menu on the left sidebar in the Editor.
To access the Format Validation setting of any Input field:
- Right-click an Input field to access its context menu
- Click Settings
- Select a type of validation from the dropdown under the Format Validation setting
Here are the available formats for validation:
- Any format – is always valid, no matter with the user types
- Text – is always valid, no matter with the user types
- A number – valid when consisting only of digits (so no spaces or special characters)
- An email – valid when respecting the format username@domain.extension (also checks for invalid email characters)
- Custom format – if none of the above suit your needs, you can always use Regular Expressions to customize your validation for any format.
If you wish to use Custom format, make sure to check How To Use Regular Expressions.
If you are using an Input Form App, remember to configure your error messages!
Tip: want to validate Member IDs or Customer Card numbers? Use Custom format to validate those values with Regular Expressions.
Required fields
Required fields is a feature available to all Input Form App elements.
You can make any field required by:
- Right-click any Input field, Text area, Dropdown, Radio menu or Checkboxes to inside an Input Form to access its context-menu
- Go to its Settings
- Check the This field is mandatory checkbox under the Mandatory setting
And remember to configure your error messages!
Reminder: when you configure Input Form fields as required, make sure you inform the user that those fields are required. The traditional * is a good way to inform your users.
Error messages
Error messages is a feature available inside the Input Form App and it allows you to show your users error messages when they attempt to submit a form that has any invalid fields.
To access and edit the error messages, simply:
- When in the Editor, enter your Input Form App
- Click the Input Form Settings menu on the top of the left sidebar in the editor
- Toggle the Show errors checkbox. Notice this will not affect live content, as its purpose is simply to hide or show the error messages while editing.
- Once you have enabled Show errors, you can procede with simply editing the error messages of your fields that are either required or have some form of validation.
Note: fields that are neither required nor enforce any type of validation will still not show an error message for editing when the mode is enabled.
Validation Feedback
Validation Feedback is a feature that allows you to further emphasize form validity to your users, and give your users immediate feedback as they type as well as further highlighting fields upon submitting an Input Form App.
It is available on Input fields both inside an Input Form App or from the tools menu on the left sidebar in the Editor.
If you would like to emphasize form validity feedback to your users, you can enable it by:
- Right-click an Input field to access its context-menu
- Go to its Settings
- Check the Enable validation feedback checkbox and optionally change the color from its default red (although it is recommended that you keep some form of red)
Enable this feature on an Input Field that:
- also uses Format Validation to give your users visual feedback as they type, until the value is correct.
- is inside an Input Form App, so that if the field is not valid when a user tries to submit the form, the field is further highlighted, along with error messages being shown.