Inline Validation
Problem
Most people don’t like surprises, especially annoying ones that create more work or prevent them from accomplishing their goals.
Solution
Validate user input as soon as possible and show any validation messages in line with the thing being validated.
Context
- You have or can make space for inline validation messages and indicators.
- You can perform the validation incrementally, as people provide input to validate, i.e., you don’t have a reason to do some kind of batch validation.
- You can validate within a relatively short (relative to the amount of input and how soon the person will move on) timeframe.
Rationale
As a general rule, the more immediately you can validate input from people and provide feedback related to it, the better. This is because the people are already focused on the thing being validated (or just finished with it), so the context is still immediate and fresh in their minds. Showing the messages in line with the thing being validated reinforces that context so people don’t have to draw a mental line between a validation message and the problem input.
Implementation
If possible (technically speaking), trigger validation immediately after an input loses focus. Sometimes it makes sense to validate immediately (such as on key up or upon choosing some option), but you don’t want to lock people into an input loop as that can be very frustrating.
Perform the validation asynchronously if it will take more than a few milliseconds. If it could take some time, you may want to rethink this approach. If it is not almost immediate, the effect of seemingly randomly displaying a validation message would be more surprising and confusing than if it occurs upon some indication from the person that they are done (such as clicking a “submit” type button). If it takes a second or so, consider showing some sort of “working” message to let people know that you are doing it; that way they are expecting a result to appear when it does and may even pause for a few seconds to keep their focus on it.
Show the validation problem messages in line with the things they are validating. The examples show a number of approaches to doing this. It is best to show the message (and not just some sort of indicator like an asterisk or exclamation mark) with the problem field if there is room, but if you have to separate them, you need to show the message in some consistent place that will be in people’s view and also show an indicator next to problem fields. There’s nothing more frustrating than trying to finish a task and being blocked but not seeing and understanding why.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Inline Validation can be implemented with any of the ASP.NET editor control along with any regular ASP.NET validators. Check out the samples browser to see it in action.
Silverlight
You can use the NetAdvantage for Silverlight xamWebMaskedEditor or xamWebNumericEditor control for this.
Windows Forms
You can use the NetAdvantage for Windows Forms controls: WinMaskedEdit and WinValidator to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinValidator to see it in action.
WPF
You can implement this pattern using the NetAdvantage for WPF Editor Control’s ValueConstraints. A sample on how to implement this can be found here.
JavaServer Faces
Inline validation is central to JSF’s design and is supported by a variety of validation tags and theh:message and h:messages tags. In NetAdvantage for JSF,in line validation is extended for common use cases like emails and currency formats. See an example here.
Examples
The primary example shows a selection from Yahoo’s sign up form that goes above and beyond inline validation, also offering alternatives that would work.
This example from Microsoft Outlook 2007 scheduling assistant shows that Outlook attempts to validate entered names against known lists. If multiple matches are found, it shows a red underline immediately to let me know I need to specify which one I mean.
Microsoft Word 2007 (and earlier) uses inline validation for grammar and spelling to provide immediate and contextual feedback to people.
This simple registration form on CodePlex validates input when the control looses focus and shows any validation problems just below the relevant field. ASP.NET provides a set of validator controls that make this fairly easy.
This is a full view of the Yahoo sign up form; see how they are consistent across the form in how and where they indicate problems, surrounding problem fields with red, turning the label red, adding a warning icon, and augmenting this will the error message to the right, which points at the field it refers to. You can’t get much more explicit and effective with your validation problem messages than this.
Highrise validates if URLs are taken immediately and shows the message below if it is taken.
Sources
Luke Wroblewski, An Event Apart: Best Practices for Web Form Design
Tags
