Validation Icon Status

Business Background

With Titan, you can enhance the user experience by verifying whether input fields contain valid or invalid content. You can configure icons to indicate whether input is valid or invalid. This option is available for input elements.

How to Guide

1. Click the + icon to open the list of elements.
2. Select the Input option from the list.
   • In this example, an email element is used.
3. Click-and-drag the Email element to the canvas.
4. Click the Email settings Gear icon. The Email setting screen opens.
5. Select the Interactivity option from the list.
6. Click the Validation Icon Status checkbox.
7. Click the Validation Icon Status Gear icon. The Validation Icon screen opens.

7. Do the following:
   • Enable icons
   • Disable the validation border

Enable Icons

1. Select the Valid option and use the toggle switch to enable the Valid Icon.
2. Click the Select from Library button. The Select icon screen opens.

3. Configure any icons for valid input.

4. Select the Invalid option and use the toggle switch to enable the Invalid Icon.
5. Click the Select from Library button. The Select icon screen opens.
6. Configure any icons for invalid input.

Disable Validation Border

1. Use the toggle switch to disable the validation border for the valid option.
2. Use the toggle switch to disable the validation border for the invalid option.

When the validation border is on, the element’s line changes color for valid and invalid input. The default line color is red for invalid input and green for valid input