Content Manager: Working with User Input Validation in the Settings Panel
When creating a form, we recommend validating the data entered in your form to ensure you receive the data you expect and in the proper format.
Whenever possible, user input validation should prevent users from entering invalid values. In cases where you can't prevent invalid data from being entered, you should check the data before submitting it and notify the user if it's invalid.
You can set up field-level validation using the settings of the user input elements. Note that validations other than required are not run on Input elements when they don't have a value.
Whenever possible, user input validation should prevent users from entering invalid values. In cases where you can't prevent invalid data from being entered, you should check the data before submitting it and notify the user if it's invalid.
You can set up field-level validation using the settings of the user input elements. Note that validations other than required are not run on Input elements when they don't have a value.
Required
Most User Input elements have a Required option. Setting an input element to be required means that the form will not submit if that field does not have a value.
If a checkbox is set to be required, it must be selected to be considered valid. Switches do not have a Required option.
If a checkbox is set to be required, it must be selected to be considered valid. Switches do not have a Required option.
Input Elements
Input elements can be configured to accept different types of information. Each type allows the user to enter only certain values, performs a specific type of validation when the user has finished entering a value, and lets you add different kinds of additional validations.
Input Type | Validation | Additional Validations |
|---|---|---|
Text | None | Limit length, pattern |
Password | None | Limit length, pattern |
Number | Value is a number | Maximum value, minimum value, pattern |
Email | Value is an email address | Pattern |
URL | Value is a URL that starts with "http" or "https" | Pattern |
Phone Number | Value is a phone number | Pattern |
Limit Length
Setting a length limit means that the form does not submit if the length of the value exceeds that limit.
Maximum and Minimum
The Number type of Input element lets you set a maximum value, minimum value, or both. Setting either of these limits means that the form does not submit if the value entered does not fall within the set limitations.
Pattern Validation
Some types of Inputs element allow you to add additional pattern validation in their settings. Pattern validation is achieved using regular expressions, which is a string of characters and symbols that defines a search pattern.
For example, let's say you have an Input element where you want users to enter a username. And the rule for usernames is that they must be made up of alphanumeric characters and underscores. They also must be between 5 and 20 characters long.
The following is a regular expression you could add to your Input element so that it only accepts valid usernames:
For example, let's say you have an Input element where you want users to enter a username. And the rule for usernames is that they must be made up of alphanumeric characters and underscores. They also must be between 5 and 20 characters long.
The following is a regular expression you could add to your Input element so that it only accepts valid usernames:
1^[a-zA-Z0-9_]{5,20}$In this expression, the ^ and $ represent the beginning and end of the string, respectively. Inside of those symbols are two sections, one enclosed in square brackets [] and the other in curly braces {}. The section enclosed in square brackets [a-zA-Z0-9_] matches lowercase letters a-z, uppercase letters A-Z, numbers 0-9, or underscores _. The section enclosed in curly braces {5,20} means you want between 5 and 20 characters that match the section that immediately preceded it, namely [a-zA-Z0-9_].
Date Pickers
A date picker lets you restrict which dates can be entered. You can restrict the user from choosing past dates, future dates, or any dates that fall on days of the week that you specify, such as weekends. They also let you control the format of the date, either MM/DD/YYYY or DD/MM/YYYY.
Did this help?
|