How can I display error message?

Support
1

Hi, I have created a form that has a step that will call the API to verify the user’s information.
At this step, when the user clicks on Next, if successful, it will go to the next step. If the user receives an error, it should display an error message on screen (it would be great if that was a sweet error message).

image
image558×934 30.5 KB

Thank you in advance.

2

Hi there, you can achieve that by either creating a dedicated new step for it, or utilizing something like the window.alert in a logic rule.

1 Like
3

Thanks for your suggestions.

However, If I’m creating a new step to display a message, how can users retry the previous step? All I want is to display an error message, and they can change the value and resubmit the step.

Using window.alert is an easy way. But I see it is an unfamiliar way for our users.

4

I would advise against using a window alert or separate step to display error messages, as both go against all best practices in UI/UX form design.

Here are 2 potential alternative solutions:

  1. Set field validation error using Feathery’s logic rule builder or advanced logic.

Example rule builder:
image

Example advanced logic:
customer_email_address.setError(‘Please enter a valid email address.’);

–OR–

  1. Create a stylized error message on your form step (ie: red text layer below your form field with an error image icon) and set it to be conditionally visible based on a hidden field value of api_error=yes. Then if your API verification receives an error, set the hidden field value to yes, so the error message is displayed.
1 Like
5

@liem.ly If using a separate step, just to make things simpler, you may add a redirect button so users can retry input.

For same page (default error message - cant be styled), using JavaScript you can incorporate Set Error functionality on the (passport number) field after your logic has run the API check and read its result.

1 Like
6

Solution 2 is what I have done. Thanks a lot!

1 Like