Inline validation is problematic

Adam Silver
Jun 26, 2017 · 5 min read

Inline validation informs users whether what they type is valid as they type. The theory is that it’s easier to fix errors as soon as they occur instead of waiting until submission. The thing is, inline validation causes several problems:

1. Interruption causes friction

Image for post
Image for post

We could wait until the user has entered enough characters but this means the only way a user will get feedback is after completing the field successfully which is pointless.

2. Interruption on blur is too late

Many people switch windows or use password managers to assist in filling out forms. Leaving the field (which triggers the blur event) causes an error to show prematurely before the user finishes typing.

Image for post
Image for post

And tabbing to the next field causes an error in the first. Due to this error, the user leaves the second field to fix the error in the first. This causes an error in two fields. This sucks.

3. Visual glitches are disorientating

Image for post
Image for post

Ideally error messages should be hidden as the user starts to fix the field — either onfocus or onkeypress. However, this exacerbates the problem.

4. Field groups are inconsistent

Image for post
Image for post

Or the date field below. As the user leaves the day box, the field is instantly invalid. You could validate when the last box is blurred but what if, for example, someone leaves the first box empty, and then tabs onto month?

Image for post
Image for post

Designing something that relies on the user doing something in the right order is not ideal. We could validate these fields onsubmit but that gives users a false positive as they have grown to expect fields to validate inline.

5. Server side validation makes for an inconsistent experience

6. False positives are untrustworthy

However, inline validation typically checks the format. This means that a correctly formatted field may still be erroneous once it’s submitted. This makes the experience untrustworthy and unpleasant.

7. Pre-populated fields are tricky

8. Validation inconsistency

9. Users might not notice it

10. It breaks the user’s flow

11. Marking success is confusing

12. Problems for screen reader users

Summary

Designers like inline validation because it avoids users seeing lots of errors after filling a long form. Assuming this is a true we can:

In any case, designing the perfect inline validation experience is nigh on impossible. Any potential benefit is outweighed by the problems it introduces. Instead put the user in control by showing errors on submit.

This is something I cover in my upcoming book Form Design Patterns. If you enjoyed this sign up to my newsletter and I’ll let you know once it’s released.

Simple = Human

Design, Development and Leadership articles written and…

Adam Silver

Written by

Author of Form Design Patterns and interaction designer focused on design systems and inclusive design.

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins

Adam Silver

Written by

Author of Form Design Patterns and interaction designer focused on design systems and inclusive design.

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store