Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've been having a debate (mostly with myself) over the best approach to deal with invalid input in text fields -- validation versus prevention.

Taking a numeric text field as an example, is it better to prevent the entry of non-numeric characters (allowing for special cases like sign, decimal pt., etc.) or allow the entry of whatever and then indicate an error message (typically when focus is left) if the result is invalid?

The first approach is "don't allow the user to do something you know is wrong" but has the disadvantage that it may not be at all obvious what is going on if a keyboard key is typed and nothing happens. It also breaks the expectation that, if you type something in a text field, you expect to see what you typed.

In the past, I've generally leaned towards the prevention approach but in general but feel perhaps, at the field input-level, the validation approach provides a better user experience. Is anyone aware of a best practice here?

share|improve this question
1  
With prevention, you also might have to deal with pasted values. There are multiple ways to handle this but it's just extra logic that you have to remember to do. –  SunnySydeUp Apr 24 at 23:05
1  
@SunnySydeUp makes a good point, to expand from my point of view: If you want for example a loyalty card number no spaces, I might have it stored with spaces (e.g. on the email your site just sent me!), paste it in, then edit out the spaces - a form that doesn't let me do this, or stops me leaving the field until I've fixed it (not seen on the web but offline) is seriously offputting. –  Chris H Apr 25 at 12:51
    
Thanks for the responses everyone! Looks like you all pretty much agree with what I've been feeling. –  Bill Dagg May 1 at 3:41

4 Answers 4

up vote 13 down vote accepted

Prevention will likely frustrate a user as they are entering it and it isn't working. Of course this can be fixed with adequate messaging that lets them know why certain characters were rejected.

Some users may also be typing with their heads down and may not see when some characters are rejected. If they are typing 10 characters but only a few within those keystrokes are rejected, they may never know since their head is down.

In general I have preferred validation as it allowed the user to see their error. As you get more complex inputs it may become more difficult for users to understand why some characters are rejected.

share|improve this answer
    
I go with the validation also because we may have complex pattern that we cannot prevent the user from entering but can be easier validated –  mmohab Apr 25 at 0:42

Preventing the user from doing something that you know is wrong is never about preventing keystrokes in a text box. It is about removing the need for typing altogether if possible for that particular input.

For example:

  • Don't validate dates in a text box, get rid of the text entry and use a date picker control.
  • Have a set number of standard options where the user picks one? Let the user select them from a dropdown / list instead of typing. If you need to give free text entry in addition to this list, use an "other" option and only then allow text entry.

There are many different data entry controls available that are not text boxes. Make sure you consider all your options before plumping for text entry.

share|improve this answer
    
Fantastic answer. Way to take a step back. I kinda got lost in the weeds ha –  SwankyLegg Apr 25 at 17:19
    
@Franchesca: Correct, of course -- don't use a text box unless necessary. My particular consideration was numeric input of arbitrary amounts -- not something that could be picked from a list. –  Bill Dagg Apr 25 at 19:55
4  
I cringe every time a web site forces good typists to reach for the mouse and navigate a clunky date picker. A sequence of precision mouse clicks is a lot more difficult than typing a few numbers. The same goes for drop downs unless they allow me to navigate by typing. –  ThisIsTheDave Apr 30 at 0:33
    
@ThisIsTheDave I know, but it really depends who you are designing for. I wouldn't force the screen traders at our company to use date pickers, as they like to do everything by keyboard. However, if you are a travel website that grandma uses once a year to book a holiday, you might not focus on this. –  Franchesca Apr 30 at 12:39

There are 3 common solutions to this problem, and depending on your specific use case, a balance of 2 or 3 of them is most likely the best.

As a rule of thumb... give feedback early and often


You can provide the user with feedback:

Before input

Writing succinct, communicative copy is a solid step before. Tooltips, onboarding flows for first-time users, and other tools are at your disposal as well.

mockup

download bmml source – Wireframes created with Balsamiq Mockups


During input

Checking content dynamically during input and providing feedback is equally valuable. In your case, if you'd prefer to accepted keystrokes, alert the user immediately. Additionally, like with the social security # or a credit card, you can automatically advance users to the next field (helping them group). With more "complicated" inputs, like an email, check the semantics for a match as soon as possible.

mockup

download bmml source


After input

Validating content after a submission is typically the most frustrating for users because they've expended the most effort. If they went through the trouble to complete a form incorrectly, they're doing repeating trivial actions that don't provide value. Telling users they did something incorrectly is detrimental to the sentiment towards a product, and that's magnified by the amount of effort expended.

In the example below, the notification that the form was filled out incorrectly could have occurred before or during the input, rather than at the end of a series of actions.

mockup

download bmml source


I would discourage you from disallowing certain keystrokes, but if the copy and feedback are clear, you can avoid the headache altogether the overwhelming majority of cases.

share|improve this answer

Don't prevent (some) keystrokes as that could easily confuse and frustrate the user.

Do provide a clear label to tell the user up-front what type of input would be valid.

Do provide as-you-type validation feedback to guide the user if they have entered an invalid value.

Others have suggested not allowing keystrokes at all for dates and numeric fields. The may be appropriate in some situations, but in many (most?) situations it's often quicker for users to be able to navigate a form / interface using only the keyboard, especially if it's something they use regularly. So, if you go down this route then bear this in mind and maybe include keyboard navigation in whatever interface you provide. However, it may be simplest to just allow normal keyboard input with the suggestions above and then consider offering an additional way to select values (e.g. date picker, drop-down list etc.) as a "shortcut" for those who would prefer to use a mouse / pointer / touch interface.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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