Handling error messages on mobile when there are many fields

Question

I am designing a signup form that has the following fields in it:

I have to show validation errors in these fields.

There are a couple of options in my mind:

Show a tooltip on each field (Tooltip might hide other fields)
Showing a popup with a summary of errors (Not a good idea)
Showing placeholders in each field with examples then showing an error message on signup. (Can password fields have example placeholder?)

Any idea on how to handle this situation?

Here's the Screen:

Hi Armin, welcome to the UX SE community. It seems you haven't done enough research on your own about the topic before posting the question. Doing a simple Google search on the topic gives a lot of relevant references. Not to mention that Android and iOS have comprehensive guides to how errors should be shown in forms — Shreyas Tripathy, Commented Apr 8, 2019 at 10:03
Hi @ShreyasTripathy, I have done some research but, None of the cases match with my situation. I guess I should an image to the question. — Armin Heller, Commented Apr 8, 2019 at 10:07
This link, which is literally the first result in the Google search, should answer all of your queries. — Shreyas Tripathy, Commented Apr 8, 2019 at 10:11
I have read this article. As you can see, there's not enough space in my design to show underline error. — Armin Heller, Commented Apr 8, 2019 at 10:14

colmcq · Accepted Answer · 2019-04-08 10:16:05Z

This is quite a good summary:

Preventing errors in the first place is the big thing, but sometimes mistakes will inevitably arise, in which case you need to think about:

Your popup idea is not good on mobile so I'd recommend abandoning that. Tooltips in fields tend to be a no-go in UX because they disappear onFocus.

Go read the article and have a think what will work best for your problem. But the real secret is preventing errors in the first place!

1 Answer 1