> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-show-validation-messages-on-required-fields.md).

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

![](/files/mIOdukpmWwE6jFHq5SYt)

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

![](/files/Yw1GMnyA3sadlupTTQ3E)

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-show-validation-messages-on-required-fields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.