Validate an email while this in the input field - when do you start?

Question

I just signed up for a new online service, and when I typed my email address, from the moment I started typing until I had typed the second letter after of the TLD, next to the input field there was an aggressive red error message - "This is not a valid email address".

This message was factually correct. At the same time, I received an error message while I had not actually made an error: I needed to input all those letters etc. in order to get to a valid email address.

I like the idea of validating while still in the field, since this is a pattern that works independently of where the field is in a form. Validating on switching to the next form field cannot work if it's the last in the form - in that case you can only do the validate + error message after hitting submit or a like action.

What is a better way of handling such validity checking while the focus is still in the field/during input? E.g. do you start when the user stops typing - immediately or after a short timeout?

Answer 1

Options:

1. Validate When Form is Submitted
2. Validate When Input Loses Focus
3. Validate X Time after User Stops Typing
4. Validate After Every Keystroke

Traditionally, sites would use option 1. Option 2 became much more common with the widespread adoption of HTML5. Over the last decade, sites have begun moving to option 4. What I rarely see is option 3, which is a pity because it's the best option, in my opinion.

Recommendation

On forms I write, I typically use Option 3. I wait for the user to stop typing for one second, and then apply validation rules. It's a hybrid approach, which doesn't attack the user with an error before the stop typing, but also gives feedback without having to leave the input.

Answer 2

The answer from @AndyMercer is a good one, but I'd suggest there is a slightly better approach that combines Option 2 and Option 4.

How I would approach this is using the following steps:

• The first time the field is focussed, defer validation until the field loses focus/is blurred.
  • This avoids the angry error message before you've had a chance to at least input your response
• After blur or submit, validate the field and provide your messages.
  • Blur is useful here because if the form has many fields, it provides the error as close to the entry as possible and allows a user to correct it before moving on
  • On submit is often needed as well, because it's feasible the user submits without blurring
• If the field has been validated at least once (through the methods above), change the validation to happen on keypress, this allows the user to see 'live' validation results as they correct an entry, rather than persisting the messages until blurred/submitted again.

This approach can be more complex to achieve technically, but I believe offers the best experience in terms of avoiding validation messages too early, or leaving them visible when in fact the requirements have been met.

Answer 3

Strictly speaking you describe not email validation but email format validation. Most likely your system will validate email exchanging email messages with user, etc.

If we are talking about email address format so the better solution is to use the same way as you use in the current application to validate zip code format, credit card number format, and so on. Thus you'll have consistent behavior for all components in your current form.

Answer 4

We in our just-in-time validator service for input forms validate all fields on blur, thus, when you leave the field. That does avoid the situation when you get an annoying error just as you start typing. It includes the e-mail field as well. I think of this as a good, balanced way of validating. This also means the fields behave consistently.