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

{% hint style="info" %}

#### 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.
{% endhint %}

#### Step by step of both display mode options

* [Default native HTML popup messages](#popup-messages-default-native-html)
* [Custom validation messages UI](#custom-validation-messages)

## Popup messages (default native HTML)

![](broken-reference)

### 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"

{% hint style="info" %}
**Important:** The only way to show these messages is on submit. This won't work with the "Validate on Blur" option selected.
{% endhint %}

### 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

{% hint style="info" %}
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.
{% endhint %}

## Custom Validation Messages

![](broken-reference)

### 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

{% hint style="info" %}
When using the "Validate On Blur" option, you can either show the "Next" button, disable it or hide it. The result is the same.
{% endhint %}