Set up a form validation guide

A form validation guide allows you to specify and verify the data entered into fields in a form, ensuring input consistency, accuracy, and completion. Specifically, form validation guides provide:

• Guidance for individual fields in a form, with additional information about the expected input.
• Input validation to check that the information meets the necessary criteria for the field.

You can configure individual fields in a form to require the following formats:

• Email address: This must be in the following format: username@domain.domainsuffix for example jane.doe@example.com.
• Phone number: This allows spaces, dashes, periods, and parentheses, for example, 123-456-7890. The number can also start with a plus sign (+) to indicate location, for example, +1 for the US. +1 (123) 456 7890.
• Date: This must be in one of the following formats: MM/DD/YYYY, DD/MM/YYYY, MM-DD-YYYY, DD-MM-YYYY, or YYYY-MM-DD.
• URL: This must be a string following a standard link format.
  Character length: The user can choose if the response needs be a minimum number of characters or less than a certain number of characters.
  Number: This rule makes sure that the input is a numeric value. There is an option within this rule to allow decimal points.
  

Permissions

There are three guide roles with different permissions: Guide Creator, Guide Publisher, and Guide Content Editor. Admin users have all of the following permissions.

• Pendo users with Guide Creator role permissions can create and edit guides from scratch, and edit an existing guide that’s not public.
• Pendo users with Guide Creator or Guide Content Editor role permissions can create and edit guides from layouts and templates.
• Pendo users with Guide Publisher role permissions can publish and schedule guides.
• All guide roles can delete draft, staged, and disabled guides.

You can also create custom user roles with a combination of the following guide permissions as needed:

• Create and edit guides from scratch.
• Create and edit guides from layouts.
• Publish guides.
• Edit and delete public guides.
• Delete draft, staged, and disabled guides.

For more information, see Roles and permissions.

End-user experience of form validation

When a visitor selects a field that you've configured to require any of the above formats, the visitor sees the helper text (for example, "Enter email address") and rule text (for example, "Must be a valid email") that you specify when you create a form validation guide.

Form validation doesn't provide feedback on the validity of an entry until the visitor is finished with that field. If a visitor enters input in the wrong format and then selects Enter or selects away from the field, the field border turns to red.

When the visitor re-selects the field to fix it, the rule text highlights in red with a cross (X) icon beside it. When the visitor enters a valid input, the rule text highlight changes to green with a checkmark next to it.

Create form validation

First, start creating your form validation guide:

1. Go to Guides > Form validation and then select Create form validation. This opens the Create form validation window.
2. If you have more than one application in your subscription, choose the application from the Application dropdown menu.
3. Enter a name for your form validation guide under Form name.
4. Select Create in the bottom-right corner of the window. This opens the details page of your newly created form validation guide, which doesn't yet have content.

There's nothing in the details page of your newly created form until you start adding form validation. To start adding form validation, select Manage in my app, enter your application's URL, and select Launch designer. This opens the Visual Design Studio over your application in a new tab:

1. In the Edit Form window, select + Add form. This opens selection mode.
2. Select an area of the application that includes your form input fields (your form container). You can see what area you're selecting based on the dotted red box that encapsulates areas of the page as you move your mouse around the screen. This reveals the + Add field option in the Edit form window.
3. In the Edit form window, select + Add field. This opens selection mode again.
4. Select an input field in your form. This opens the Field settings window. You can see what field you're selecting based on the dotted red box that encapsulates form elements as you move your mouse within the form container. 
5. Enter a meaningful name for the input field. At the top of the Field settings window, hover over and select the field name to edit it. 
6. Add Helper text for the input field. This is the text that shows when a visitor selects the form field. For example, if you add form validation to an email field, your helper text might include instructions like "Enter email address" or hint text like "jane.doe@example.com".
7. Select a Rule to validate the field with: Email, Phone, or Date.
8. Optionally, edit the Rule text. This is the text that lets the visitor know what criteria they need to meet and whether they've met the criteria. For example, if you add form validation to an email field, your rule text might say something like "Enter a valid email address".
9. Select Done in the bottom-right corner of the Field settings window.
10. Optionally, repeat steps 8 to 14 for each field you want to add form validation to.
11. Select Done in the bottom-right corner of the Edit form window.
12. Optionally, preview your form validation. Select Preview from the action bar at the top of the page, choose where you want the preview to appear (New tab, Same tab, or New window), and select Launch preview. When you're done testing the functionality, select Exit preview in the top-right corner of the action bar.

When you're done, select Save and then Exit in the top-right corner of the page to save your form validation guide and close the Visual Design Studio.

View form validation guide list

Existing form validation guides are listed in the Form validation page in Pendo. To see this list of form validation guides, go to Guides > Form validation. From here, you can:

• Filter existing form validation guides by application and status using the dropdown filters at the top of the page.
• Search for a specific form validation guide using the Search bar in the top-right corner of the filters section.
• Open a form validation guide by selecting its name in the table.
• Order form validation guides by the columns in the table: Form name, App, Status, Segment, or Page.
• Change the status of each form validation guide using the dropdown menus in the Status column for the table.

Check form validation fields

After you've created a form validation guide, you can see a list of fields that are included in the validation form guide. Find and open your form validation guide from the list in Guides > Form validation. From here, the Fields table lists all the fields that include validation, including:

• The field Name.
• The CSS Selector for the field.
• The Helper text added to the field.
• The Rule used to validate the field.

Preview and publish form validation

You can preview your form validation from the Visual Design Studio:

1. Find and open your form validation guide from the list in Guides > Form validation.
2. Select Manage in my app.
3. Enter your application's URL and then select Launch designer. This launches the Visual Design Studio over your application.
4. Select Preview from the action bar at the top of the page. Choose whether you want to launch the Visual Design Studio in a New tab, the Same tab, or a New window.
5. Select Launch preview. 
6. Select Save and then Exit in the top-right corner of the page when you're done.