I'm working on a registration form with real-time inline validation. I'm wondering when we should trigger error messages:

  • before, when the field is in focus and until the user has entered a valid answer
  • while, when the user is typing and until the has entered a valid answer
  • after, when the field is out of focus

Field validation

  • With "before", you mean that when the user sees the form for the first time, there will already be error messages saying that the fields were not filled yet? – Heitor Mar 6 '15 at 12:10
  • The error state of the field would be triggered on focus. – Leo Mar 6 '15 at 12:22
  • What is the form used for? How many fields are in the form? – tohster Mar 6 '15 at 12:50
  • It's a registration form and there are 8 fields in total. – Leo Mar 6 '15 at 12:52
up vote 10 down vote accepted

One relevant study that springs to mind is described by Luke Wroblewski in Inline Validation in Web Forms. It found that validating inputs prematurely can be harmful and that validating fields after input helps users to complete forms more quickly and accurately.

To better understand when to show inline validation messages, we tested a few variations in the top half of our form.

After

In this version of the form, we displayed a validation message (success or error), after the user indicated that she was done answering a question by moving on to the next one. (This is validating “on blur” in technical speak.)

While

In this variation, we displayed (and updated) a validation message while the user answered each question. (That is, “on key press.”)

Before and while

In this version, we displayed a validation message before the user answered each question—that is, as soon as they focused each form element—and then while they answered the question. (This is validating “on blur and on keypress.”)

It concluded that:

When we used the “after” method in the first half of the form, participants completed the form seven to ten seconds faster than when we used the “while” and “before and while” methods respectively. The “before and while” method not only caused longer completion times, but also produced higher error rates and worse satisfaction ratings than the other inline validation variations we tested.

General rules

  • For open-ended questions, give feedback after the user finishes providing an answer (on blur, when they move on to the next field).

  • For questions that the user might need help with sooner (e.g. username and password fields), give feedback while they are typing but use an appropriate delay so that premature error messages don’t frustrate them.

Show error messages before the user even started filling the form can be misleading since the user haven't started to fill the form yet. From what I've seen in common forms, the error messages appear usually when the system recognizes an error while the user try to submit. This can also be misleading, especially when there is a large form and the error occurred somewhere at the beginning of it. Therefore, I think that the best way is to show the error message of a field after focusing on it once and moving to the next one.

  • you make very valid points, but for the best answers you should try finding and demonstrating examples, finding sources to back up claims and formating the answer so it isn't just one block of text – Toni Leigh Mar 8 '15 at 14:09

Email id validation when focusing the inputfield - Till you enter valid id error message will fire - once you enter proper mailid formate error message will hide enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.