When filling out a form to what extent should validation be done while the user is still typing?

Question

I'm working on a registration form and it validates some parts while the user is still typing. For example, the username is being checked after each character is entered to see if it is available or taken. A field beside the input is updated telling the user whether or not the name is available.

The e-mail address is going to be validated as well. I'm wondering if it should be validated after the Submit button for the form is clicked or if it can be validated after each character is typed? One idea is to hold off auto-validation until 10 characters are typed (this could be done for the other inputs as well).

Is this constructive for users? Is there a better/more correct way to do validation of form input fields?

Answer 1

Instant feedback is a good feature to have. It makes for a smoother experience.

In form entry validation, I generally see three main trends:

• Validate after each character entry - Instant feedback
• Validate after each input field (once you leave the field) - Delayed feedback
• Validate on submission - Delayed, user initiated, feedback.

The last method is lesser and lesser used since now we have enough capability to provide immediate feedback.

There are pros and cons of both the first and second approach.

Instant feedback:

• Makes it real easy to pick unique usernames and other such inputs
• Really annoying in email and password validations and similar fields (Volley of errors till the end of input)

Delayed feedback:

• Not instant and hence sort of trial and error if looking for unique usernames and such
• Also, in the last field in the form, the user needs to click somewhere outside the box to see the validation (before pressing submit)

Answer 2

It depends on the field being filled out. According to Luke Wroblewski [Inline Validation in Web Forms], there are some fields which can benefit from immediate validation and others which can slow the user down.

The method of validation you missed falls right in the middle of your listed options: field-level validation. In most cases, field-level validation will provide a happy medium.

For instance, you don't want to provide immediate validation on a first or last name. What would you be validating against? Likewise, users will be annoyed at an email field that glows red when they are in the middle of entering an address because the expected "." hasn't been reached yet.

If a user is in the process of entering a username "WillCode4Food", they don't care that "WillC" "WillCo" or "WillCod" are available as it's being typed in. In this situation, validating at the field-level, not character-level, will be much more meaningful and valuable to the user.

Answer 3

Validation while the user is still typing can get very tricky and it runs the risk of getting in the way of the form. As an example, there are a few things that the jQuery Validation Plugin does well (demo):

No validation until a field with input is navigated away from. When you first start the demo, the Email fields does not have a warning, but if I click into the field and type anything (invalid) and leave the field, it will warn me. This is kind of where you are going with your 10 character limit, but I don't think the characters is the right way to trigger the validation. I prefer the method of this tool.

I've seen so many people get form validation wrong, by doing things like the 10 character limit, which can provide bad results for the user. However, when done right, I believe it is more effective then validation on submission. Mainly because, when a user tries to submit a form with errors, sometimes the errors are not called out well, which is not a risk when the user is already focues on the field with an error.