Enable and Use Text Input Validation Patterns in Adobe Experience Manager Adaptive Forms
Overview
In Adobe Experience Manager (Adobe Experience Manager) Forms, specific validation formats (like Social Security Numbers, Email addresses, or Zip Codes) for Text Input components are controlled at the Template Policy level. This guide explains how to:
- Access the template editor and configure the Text Input component policy to expose validation patterns.
- Create an Adaptive Form and apply those validation patterns to a Text Input component.
Prerequisites
- Access to an Adobe Experience Manager instance with Forms enabled.
- Permissions to edit Templates (usually part of the
template-authorsgroup). - Permissions to create and edit Adaptive Forms.
Part 1: Enable Validation Patterns in the Template
Step 1: Access the Templates Console
- From the Adobe Experience Manager Home screen, click Tools (the hammer icon) in the left sidebar.
- Navigate to General > Templates.
- Select the folder containing your project templates (for example, Core Components Examples).
- Locate the specific template you wish to modify (for example, AF Blank) and select it.
- Click Edit (or open the template directly).
Step 2: Access the Component Structure
- Ensure you are in the Structure view (select “Structure” from the mode dropdown in the top right if necessary).
- Locate the main Layout Container or the specific container where your Text Input component is allowed.
- Click on the container to reveal the allowed components list.
- Find the Adaptive Form Text Box component in the list.
- Click the Policy icon (represented by a file/drawer symbol) next to the component name.
Step 3: Configure the Text Input Component Policy
-
In the policy editor, click the Formats tab on the right side of the window.
-
You will see a list of available validation patterns. Check the boxes for the formats you want to enable:
- Phone Number
- Social Security Number
- Email Alphanumeric
- Zip Code
Step 4: Define and Save the Policy
- Switch back to the Policy tab (or check the left-hand settings).
- In the Policy Title field, enter a clear name (for example,
new-textinput-default-policy). - Click the Done (checkmark) icon in the top right corner to save your changes.
Part 2: Create a Form and Use Validation Patterns
Now that validation patterns are enabled in the template, you can create an Adaptive Form and apply them to Text Input components.
Step 1: Create an Adaptive Form
-
Navigate to the Forms & Documents interface.
-
Click the Create button in the top right corner.
-
Select Adaptive Form from the dropdown options.
-
Choose the template where you enabled the validation patterns (for example, Blank) and click Next.
-
On the Add Properties screen:
- Enter a Title for your form (for example, “testPolicy”). The Name field auto-populates based on the title.
- Ensure the correct Theme Client Library is selected (for example,
adaptiveform.theme.canvas3).
-
Click Create. A success message appears.
-
Click Edit to open the form in the editor.
Step 2: Add a Text Input Component
- In the form editor, locate the Components browser in the left sidebar.
- Use the search bar to find the Adaptive Form Text Box component. Typing “text” filters the list.
- Click and drag the Adaptive Form Text Box component onto the main canvas area.
Step 3: Configure Component Formatting
- Click on the newly added Text Input component to select it.
- Click the Configure icon (represented by a wrench) in the toolbar that appears above the component.
- In the properties dialog, navigate to the Formats tab.
- Locate the Type dropdown menu and change the selection to Phone Number (or another enabled format).
Step 4: Configure Data Validation
- While still in the component configuration dialog, navigate to the Validation tab.
- Locate the Validation Pattern section.
- Click the Type dropdown menu.
- Select Phone Number from the list of validation patterns. This ensures the form produces an error if the user inputs text that does not match a valid phone number format.
- Click the Done (checkmark) icon in the top right of the dialog box to save your changes.
Verification
To verify that validation patterns are working correctly:
-
Preview the form in the editor.
-
Enter test data in the Text Input component.
-
Confirm that:
- The enabled validation patterns appear in the component’s Formats and Validation tabs.
- Invalid input triggers appropriate error messages.
- Valid input is accepted without errors.
Troubleshooting
-
Issue: The validation patterns do not appear in the form component.
- Solution: Ensure that the template policy was saved correctly and that you are using the correct template when creating the form.
-
Issue: Unable to access the template editor.
- Solution: Verify that you have the necessary permissions to edit templates (membership in the
template-authorsgroup).
- Solution: Verify that you have the necessary permissions to edit templates (membership in the
-
Issue: The Text Input component does not validate input correctly.
- Solution: Recheck the validation pattern settings in the component’s Validation tab and ensure the correct pattern is selected.
Next Steps
After enabling and using text input validation patterns in your Adobe Experience Manager Adaptive Forms:
- Configure additional validation patterns for other data types.
- Explore other component policies to customize form behavior.
- Set up form submission handling and data processing logic.