Validate after focus (not while typing)

thethinklab.au · 2023-01-29T07:03:42.723Z

It’s pretty standard UX that you shouldn’t give users feedback on field validity until after they have finished typing…

If they re-enter an invalid field to fix if, then the error UI should remove as soon as the input becomes valid.

Is there a way to do this natively, or a plug-in anyone knows of, without custom expressions on every field? Looking to avoid javascript.

The current behaviour where an input shows red straight away is a bit offputting

Thanks!

hanan1 · 2023-01-29T08:54:10.511Z

how nice to see creators caring about ux!

you can simply make a field red only when it is invalid AND isn’t focused.

That being said, error prevention is also an important heuristic in UX design. Therefore having a field appear in invalid state as long as it is invalid keeps user attention on the input until they fix it. It helps to have assisting text beneath it to ease the anxiety the red border may cause.

thethinklab.au · 2023-01-29T10:48:39.447Z

Thanks @hanan1 - this is much better than the default behaviour and easily implementable by applying to the element style.

I also like the suggestion of specific errors to reduce anxiety, so will look to implement and create reusable elements for all my input types.

These are some of the better articles I’ve read on the topic, which i’m trying to consider in my implementation A Complete Guide To Live Validation UX — Smashing Magazine & Inline validation in forms — designing the experience | by Mihael Konjević | WDstack | Medium

Some good conclusions:
Show Errors Immediately If Issues Are Severe

Late Validation Is Almost Always Better

Validate Empty Fields Only On Submit

Reward Early, Punish Late (this is one of my faves, and something I want to try and do… that’s having behaviour around editing erroneous fields)

hanan1 · 2023-01-29T13:38:01.125Z

That’s awesome, thank you for sharing that

system · 2023-04-09T07:04:19.699Z

This topic was automatically closed after 70 days. New replies are no longer allowed.