Home CMS Documentation Home CMS 10 Editing Basics Page Builder CMS 10.0–10.5 Page Builder Forms in Page Builder Validating User Input

CMS 10.0–10.5 Validating User Input in Visual Form Builder

Prerequisites:

Administrators: Complete prerequisites to enable user access to the Design tab. See Page Builder Prerequisites for details.
The instructions assume that a visual form with form fields exists in the presentation container. See Forms in Page Builder for details.

When creating a form, users must submit properly formatted input. Typically, form validation requires fluency in one or more scripting languages. However, in Visual Form Builder, content creators can configure form validation through a series of pre-built components.

The following fields include the Advanced > Validations section:

Visual Form Builder - Form Field - Checkbox
Visual Form Builder - Form Field - Selection
Visual Form Builder - Form Field - Text

To validate a form field in Visual Form Builder:

Navigate to Site > Site Tree.
Select a page that contains a form built in Page Builder.
Select the Design tab.
Open the presentation that contains the form.
Click a form field to select it.
See the Adding Content Units: Properties Table for details to select fields and display properties.
In the Content Unit Properties accordion area of Design Presentation pane, click the Edit Content Unit button.
Expand the Advanced section in the editor, then expand the Validations section.
This section contains a group of component elements.
Click Create to select a validation component.
The Create New Component dialog displays.

In the Select Type field, choose a Form Builder component from the drop-down list.

Additional Information

The following is a list of all validation components and their configuration options. These components are based on JQuery validation methods for the JQuery 1.17 validation plugin.

Validation Components	Configuration Options
Required	Validates that the form field has been completed. This validation component can be used on any form field.
URL	Validates that the form field contains a properly formatted URL.
Number	Validates that the form field contains a number. Decimals are allowed.
Email Address	Validates that the form field contains a properly formatted email address.
Digits	Validates that the form contains an integer.
Date	Validates that the form contains a date (several formats are valid. Read the documentation on the JQuery method for more information.).
Credit Card	Validates that the form contains a credit card number. This method only validates that the credit number is formatted correctly. Checking the validity of the credit card itself must be performed server side.
Length Range:	Validates that a form field contains a value within a predetermined range of characters or selections.
Minimum Length	The minimum number of characters or selections. If left blank, there is no minimum length.
Error Message: Minimum Length Label	The message that displays when an input doesn't meet the minimum length (Default: "Minimum Length:").
Maximum Length	The maximum number of characters or selections. If left blank, there is no maximum length.
Error Message: Maximum Length Label	The message that displays when an input exceeds the maximum length (Default: "Maximum Length:").
Error Message	The general error message that displays when an input is outside the desired range.
Range:	Validates that the form contains a numerical value within a given range.

In the Error Message field for each validation component, enter the message that users receive when their input doesn't meet the validation requirements ("Valid email address required" when requesting an email, etc.).
The type of components available vary by form field. A radio button field, for example, can't include components that validate text input.
Click Save.