unruthless / jQuery.cardcheck

Credit card type detection and validation
11 stars 4 forks source link

When to show inline validation
? #1

Closed unruthless closed 13 years ago

unruthless commented 13 years ago

http://www.alistapart.com/articles/inline-validation-in-web-forms/

"AFTER METHOD HELPS USERS TO COMPLETE FORMS MORE QUICKLY

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. Why? Here’s what happened when we used the “while” and “before and while” methods: When several participants noticed an error message while trying to answer a question, they entered one additional character into the input field, than waited for the message to update. If the updated message continued to show an error, they entered another character, then waited for the validation message to update again, and so on, resulting in longer average completion times.

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. Our participants articulated their strong distaste for this methodology:

“It’s frustrating that you don’t get the chance to put anything in [the field] before it’s flashing red at you.”

“When I clicked in the First Name field, it immediately came up saying that [my first name] is too short. Well of course it is! I haven’t even started!”

“I found it quite annoying how red crosses came up when you hadn’t finished typing. It’s just really distracting.”

These negative reactions, longer completion times, and error rates illustrate that validating inputs prematurely can be harmful. Instead, when you validate open-ended questions, give feedback after the user finishes providing an answer. Or in situations in which people need help sooner, give feedback while they work toward an answer, but use an appropriate delay so premature error messages don’t frustrate them."

unruthless commented 13 years ago

The credit card icon should show up as soon as possible -- so, on keyup.

The valid/invalid message shouldn't show up until the user has finished providing the card number -- so, on blur.

unruthless commented 13 years ago

Example implementation code for this is now part of demo.html.