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.

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.

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:
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?

|

Hire a Wix Partner

Get help with your website's design, marketing and small tasks from a professional freelancer or agency.
Start Now