Validation Icon Status

Business Background

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

How to Video

• Coming soon!

How to Guide

1. Click the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
2. Select the Input option from the list.
   • In this example, an email element is used.
3. Drag and drop 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