Forms Need Validation

Designing inline validation and error handling

Andrew Coyle
Dec 19, 2016 · 4 min read

Here are the form elements I created to illustrate concepts in this article. Feel free to use it in your work.

Inline validation is a method to check the validity of input and give feedback before submission. It significantly enhances the usability and user experience of forms. This article explains inline form validation and error handling design techniques.

Validation

An example of inline validation

The easy part of inline validation is the validation part. When an entry is validated, it can be communicated with a simple checkmark. Inline errors are more tricky.

Presenting inline errors

Inline errors should be presented with copy explaining the issue and how to fix it.

It can be presented in many ways including:

Above the field

Below the field

Inline

As a tool-tip

When should you provide inline validation and errors?

I have distilled five ways to provide inline validation and errors, each with its trade-offs and limitations. It’s important to address problems early and at their source, but it is easy to make matters worse with an inconsiderate approach.

1. When a user clicks into an input

Immediately showing an error when a user clicks into a field is annoying, misleading, and distracting. It is like the form is yelling at you before you say anything. Talk about a bad relationship… However, this approach can be done well by presenting helper text in place of an explicit error until the error is confirmed, or the entry validated.

2. As a user types

This approach annoys the user until the entry is validated. The user is harassed with each entered character, providing more frustration than help. It is like arguing with someone who is talking over you… However, this method provides helpful feedback on password strength and username availability.

3. Once the user reaches the character requirement

This validation method works for inputs with predictable character lengths like Zip codes, phone numbers, CC numbers, etc. However, this can be problematic for internationalization because the format is not always known.

4. When a user leaves the field

Providing feedback when the user leaves the field is probably the best default behavior because validation occurs after the entry is made explicit. However, it can disrupt a user’s flow because it provides feedback after the user has moved on.

5. When a user pauses

This technique provides feedback when a user pauses, mitigating the annoyance of inline errors as a user types and provides feedback when they pause or exit the input.

It is surprising how many forms don’t employ simple inline validation and error handling, and it is even more surprising how often it is poorly implemented. I hope this article helps you design better web form validation. I would love to hear your helpful techniques.

Here are the form elements I created to illustrate concepts in this article. Feel free to use it in your work.

It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.

For more:

Follow NextUX | Find me on Twitter

NextUX

The future of iteration

Sign up for NextUX

By NextUX

Our latest articles on design and product development Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Andrew Coyle

Written by

Building @nextuxdesign (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

NextUX

NextUX

https://nextuxdesign.com/

Andrew Coyle

Written by

Building @nextuxdesign (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

NextUX

NextUX

https://nextuxdesign.com/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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