SmartTips provide on-screen guidance that can be used to give users additional information about specific items on your page.
Recall that Validation SmartTips allow you to provide real-time feedback to your users before form submission. Because we introduced Validation SmartTips in Builder I, we will quickly review the examples below, and this time we will learn how to create Validation SmartTips using an exercise on Eddie's Depot. We will also highlight Placeholder SmartTips.
Validation Rules
Validation SmartTips verify that a user has added valid content into fields. They verify field inputs by checking against validation rules.
Validation rules allow you to set what is considered a valid input for a field. If the validation rule evaluates as false (incorrect input into a field) then the SmartTip will display your validation message.
Using the Rule Engine, you have the option to modify any of the preset rules by selecting Update rules to the right of the rules dropdown.
The figure shows the common preset validation rules that can be selected in the SmartTip Options Interaction tab.
Validation SmartTip With Icon
For example, you can add a validation SmartTip with an icon on a phone number field that will display a red error icon and message if an incorrect entry is made and will show a green success icon once the mistake is corrected.
There is also the option to instead have the error message and icon disappear when the mistake is corrected without the Success Indication.
The figure shows the first example that shows a validation rule evaluating as false and displaying a validation message with an icon. The second example shows the rule evaluating as true and displaying the success icon.
Validation SmartTip Without Icon
A validation SmartTip without an icon will display a red highlight around the field if the validation rule evaluates as false.
Here, once the phone number is corrected, the error message and highlight disappears.
You also have the option to enable a Success Indication that will display a green success highlight and/or a success message to the user.
In the figure, the top example shows a validation rule evaluating as false and displaying a validation message and highlight. The bottom example shows the rule evaluating as true and no longer displaying the validation message.
Note
Validation rules are only evaluated when the user enters content into the field and then focuses (clicks or tabs) out of the field.
Placeholder text is an additional hint, description, or example of the information required for a particular field.
Placeholder SmartTips
Placeholder SmartTips are an additional type of Guidance SmartTip and appear as text within an input field.
These appear as "suggestions" for the user and disappear once the user begins typing into the field. They replace any existing placeholder text already present on a field.
Watch the video to know more. Note that the video doesn't support audio.
In the video, the example for the Placeholder text is being entered.
Creating a Placeholder SmartTip
These can only be created if the Guidance SmartTip's selected element is an input field. It's not available if Validation or Both is selected in the capture screen settings.
When creating the SmartTip, type in the Placeholder text in the relevant field. Then, select the "Placeholder text only" option under "How to display the SmartTip?" There is not an icon option for this type of tip.
The figure shows the steps to create a Placeholder SmartTip.
