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:

User submitting the page, or
User leaving the field (i.e. it loses focus)

Display - Validation messages can be displayed as:

Default native HTML popup messages, or
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

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.

PreviousWork in Progress: How to Add Default User Data NextWork in Progress: How to create an Option Selector Results Page

Last updated 2 years ago

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

hashtagStep by step of both display mode options

hashtagPopup messages (default native HTML)

hashtagStep 1: Wrap the Flow in a Form

hashtagStep 2: Prepare the "Next" Button

hashtagStep 3: Make the inputs "Required"

hashtagCustom Validation Messages

hashtagStep 1: Wrap the Flow and Allow Custom Messages

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

hashtagStep 3: Give them Custom Messages