Better form validations

What makes for good form validations? Here are two patterns:

• Client-side validation
  Check for things like a valid email and matching password confirmation before making a request to the server.
• Inline explanations
  Don’t make the user hunt for mistakes, especially on long forms.

But there’s a third pattern that’s well-intentioned yet often poorly implemented: validate as the user types.

The idea is to provide client-side validation before the user even presses submit. The benefit? Helps them fix mistakes as they’re made and front of mind. The cost? Let’s see…

Why is GitHub yelling at me?!

OK, so what’s an alternative? Don’t validate the form until the user’s done typing. Facebook does a pretty good job of this:

I say pretty good, because there’s one flaw: the validation only updates when the user tabs or clicks off the field. So things like this can happen:

I entered a valid email above — after making a mistake — but the error remains until I click elsewhere. It’s confusing and I’ve encountered it on numerous sites.

My proposal

I couldn’t find an example that addressed all the points above so I made one on CodePen. Here’s it in action:

What do you think?