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
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.
Last updated