Work in Progress: How to Show Validation Messages on Required Fields

For Form Validation, you have a choice of triggers and displays.

Triggers - Form Validation can be triggered by:

1. User submitting the page, or

2. User leaving the field (i.e. it loses focus)

Display - Validation messages can be displayed as:

1. Default native HTML popup messages, or

2. Savvy's custom validation UI

The only combination that's not possible is Trigger #2 + Display #1 because the default native HTML popup messages immediately re-focus the field, meaning the user could never leave that field.

Step by step of both display mode options

• Default native HTML popup messages

• Custom validation messages UI

Popup messages (default native HTML)

Step 1: Wrap the Flow in a Form

• Go to "Entire Flow" on the All Tab of the Left Side Bar

• On the Options Tab of the Right Side Bar, click on the "Advanced" dropdown

• Check the "Use Form Wrapper Tag" box

Step 2: Prepare the "Next" Button

• Select the Global Next Button (If at some point you use a Next/Submit/Go-on button that isn't global you should do the same for that one)

• On the Options Tab of the Right Side Bar, go to the Validation Area, and check the "Submit as Form" and "Needs Validation Passed" boxes

• Set Visibility to "Always show"

Important: The only way to show these messages is on submit. This won't work with the "Validate on Blur" option selected.

Step 3: Make the inputs "Required"

• Select the Input Box Component

• Go to the Options Tab on the Right Side Bar

• On the Configuration Area check the "Required" box.

• Repeat with all the Input Boxes you want to be required on the Flow

This will get you a message on the fields you need to fill when you click the "Next" button. You can also get the flow to show a custom message when the field is empty or when the input is not correct.

Custom Validation Messages

Step 1: Wrap the Flow and Allow Custom Messages

• Go to "Entire Flow" on the All Tab of the Left Side Bar

• On the Options Tab of the Right Side Bar, click on the "Advanced" dropdown

• Check the "Use Form Wrapper Tag" box

• Check the "Use Custom Validation Messages" box

Step 2: Make the inputs "Required" and Give them Custom Messages

• Select the Input Box Component

• Go to the Options Tab on the Right Side Bar

• On the Configuration Area check the "Required" box

Step 3: Give them Custom Messages

• On the Validation Area in the Options Tab, fill in the "Custom Invalid Message" and the "Custom Field Empty Message" where needed

• For values like Emails, you can select a preset from the "Validation Formula" dropdown

• Check the "Validate On Blur" box. This will show the custom message when the user leaves the field

• Repeat with all the Input Boxes you want to be required on the Flow

When using the "Validate On Blur" option, you can either show the "Next" button, disable it or hide it. The result is the same.