Displaying form errors with HTML5's new input types

Question

Hello,

Currently, HTML5's new input types,

<input type="number"...>
<input type="email"...>
<input type="url"...>

simply focus on any offending text-boxes with mismatching user input upon form submission.

Problem: Focusing is fine. However it's a very subtle way of telling the user why the form is not submitting.

Which of these is the better solution to let the user know what's wrong:

• Add css on a focused textbox by adding a background color. It's still slightly subtle and the user might not immediately understand why a particular textbox is focused.
• Javascript validation (jQuery validation plugin) for displaying error messages. In which case, I might as well use ordinary input types, and do everything here.

Suggestions are welcome!

Answer 1

According to good old usability heuristics:

Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

http://www.useit.com/papers/heuristic/heuristic_list.html

The best choice is to clearly notify the user about the error (not only where has happened, but also why...). Above that the UI should be clear enough to prevent the user from unallowed input.

IMHO you can use JQuery for error handling, still leaving html5 types, which are "semantically" better than ordinary input types.

Answer 2

Make them go red.