CMS: About Validation Settings for Input Elements

3 min read
When using input elements to create custom forms, you can add validations to each of the input elements. You can also add validations to the collection fields themselves. This ensures that your visitors can only submit values that match the correct format you need in your collections. 

Required

Most input elements have a "Required" option. Setting an input element to "Required" means that the form will not submit if that field does not have a value. If you set the input element's connected collection field to "Required", visitors get an error if they try to submit content with empty values.

If a checkbox is set to "Required", the input element must be selected to be considered valid. Switches do not have a "Required" option. 

Input elements

You can set input elements 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 finishes 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 input elements 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. Your 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?

|