CMS 10.0–10.5 Validating User Input in Visual Form Builder

  • 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:
  1. Navigate to Site > Site Tree.
  2. Select a page that contains a form built in Page Builder.
  3. Select the Design tab.
  4. Open the presentation that contains the form.
  5. Click a form field to select it.

    See the Adding Content Units: Properties Table for details to select fields and display properties.

  6. In the Content Unit Properties accordion area of Design Presentation pane, click the Edit Content Unit button.

    Edit Content Unit icon

  7. Expand the Advanced section in the editor, then expand the Validations section.
    This section contains a group of component elements.


  8. Click Create to select a validation component.
    The Create New Component dialog displays.
  9. 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 ComponentsConfiguration Options
    RequiredValidates that the form field has been completed. This validation component can be used on any form field.
    URLValidates that the form field contains a properly formatted URL.
    NumberValidates that the form field contains a number. Decimals are allowed.
    Email AddressValidates that the form field contains a properly formatted email address.
    DigitsValidates that the form contains an integer.
    DateValidates 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 LengthThe minimum number of characters or selections. If left blank, there is no minimum length.
    Error Message: Minimum Length LabelThe message that displays when an input doesn't meet the minimum length (Default: "Minimum Length:").
    Maximum LengthThe maximum number of characters or selections. If left blank, there is no maximum length.
    Error Message: Maximum Length LabelThe message that displays when an input exceeds the maximum length (Default: "Maximum Length:").
    Error MessageThe 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.
  10. 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.

  11. Click Save.