I'm working on improving error visibility on our form. We display errors next to the field and highlight the tab containing errors. Which works well on desktops above a certain resolution. But on mobile or small laptops errors aren't always visible.

This screen shot below of the form contains errors but are only visible when scrolling up.

Mobile View

mobile view

Actual Page

enter image description here

Should I display errors beside the save/submit button or scroll to the area/tab that needs correction?

3 Answers 3


enter image description here

  • Make sure that all the fields in your accordion are closed upon error check (on SAVE button press I assume)
  • Display a contextual error message next to the SAVE button
  • [OPTIONAL] Disable the SAVE button unless all the errors are fixed
  • This is great because it makes errors clear enough without eating screen real state.
    – Luciano
    Nov 6, 2019 at 14:04

I think it would be more intuitive to just scroll to the area/tab that needs correction. Since it is for mobile and the users would want to complete filling the form as soon as they can, they would want to just fix the errors as preferred to seeing a list of errors first.

If there are multiple errors and there is a 'complete action' for each information the user fills, once the user has corrected an error and the system detects the 'complete action', it could automatically scroll to the next error.

  • However take into account situation when there is more than one error.
    – Ada
    Nov 6, 2019 at 10:34

You can use toast notifications for smaller screens. Bootstrap has some amazing examples, https://getbootstrap.com/docs/4.2/components/toasts/

  • Toast notifications look great (thanks for the link). But that is a solution to a different problem. I don't want to use more screen realestate on mobile with a notification which can be dismissed. Need to figure out the best way to alert the use to invalid input.
    – Lex
    Nov 6, 2019 at 5:55

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.