Form validation ? When to trigger error validation?

Question

Today in any form, we can have real-time validation like in example below

^{download bmml source – Wireframes created with Balsamiq Mockups}

The question is: When should I trigger the validation: as soon as possible ? (seems good for the name error, but bad for the email field: it will mark invalid but the user hasn't stop typing yet)

On focus out ? (seems good but you need to move back to the field to correct it, instead of knowing immediately)

On focus out the first time, as soon as possible the second time?

Is there a mix between the two that is better? Does it depend on the type of validation error?

Many thanks,

P.S: We also have a final validation just before the Submit button, so that users are redirected (through links) to the invalid fields. I know of this answer: Form validation - When should error messages be triggered? but I would like other insights

Answer 1

If you're validating for characters, it makes sense to validate as you type.

If you're validating the string, something more like the structure (i.e. the email) it makes sense to validate on blur/focus-out.

Probably letting the user know what's allowed beforehand would be a good idea also.

Answer 2

For Email field:

You may start background client side scripts post the user types @.

1. If the user types "gm" or "yah", suggest the user possible alternatives like "gmail" or "yahoo" in a drop down menu in such a way that it doesn't disturb the user.
2. On the other end if the user enters example domains like test.com or example.com you can show an error message instantly.
3. In case of typos like gmaal.com you may change the input box border color to red and say " Did you mean gmail.com?" etc.
4. Lastly on lost focus, you may check whether the email entered exists in the db and show a error (red tick symbol) or OK (green tick symbol) signal respectively.
5. Turn off the invalid characters buttons by default to reduce probability of error.

For Name field:

1. Turn off the invalid characters buttons by default to reduce probability of error.
2. Validate as they type.

You may want to check every input server side post the submit button is clicked as a precaution/confirmation.

Answer 3

In my experience triggering individual field validation on 'focus out' works well. It allows the user to complete / edit their typing without the feeling of being told they're wrong before they finish. Also it informs them at their point of focus - reducing the need to search around the form to find the fields with errors.

Answer 4

Upon blur, validate the field. If invalid, focus back on the erroneous field.