Generally, in a forms, when some field is invalid, the error message shows next to the field. However I am not sure where/how to display errors that are not directly related to the fields. We have a webapp for the employees of a company. We store a list of credit cards that belongs to employees of the company, to create an account in the site the employee needs to provide its credit card. Then after clicking on "submit" we perform the following validations:

  1. If the credit card provided does not match to anyone in our list, we need to show an error message, something like: "Unable to Register Account, We’re sorry, but the information you provided does not match our records. You may contact us at XXXXXX"

  2. The credit card allow us to know which features user is going to see. If the credit card provided belongs to an employee that do not have any features allowed, we show an error like: "Unable to Register Account, No features configured for you.... You may contact us at XXXX."

My question is how to show those messages? In a modal or in the same form (maybe at the top of above the Submit button)

Thank you in advance!!

1 Answer 1


This feels like the time to use a modal.

This is something that impedes their progress and aside from fixing a typo in the card number they provided, they can't remedy it through your UI. That seems like sufficient reason to take precedence over the form data and "force" them to read the message.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.