[jQuery] How to display error/validation messages?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>Sorry for top post. Blame Outlook.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>Since you seem interested to know a thing or two about
usability here are some comments. :)</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>3. This is assuming that javascript is enabled
right?</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>4. When would tabbing not be allowed? Also, the tabbing in
your sample form is all out of whack. I think it's best to not adjust the
tabbing order.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>5a. When I put in my email address incorrectly (on purpose)
and tabbed to the next field I received an error (I like your implementation).
But I also saw that the data I'd entered was removed. How annoying! What if I
simply forgot to put a period in my long email address? Now I have to type the
entire thing over again and possibly make the same mistake.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>5b. What is "Lego is a great example..."? Do you mean
Lego as in the building bricks? How does that relate to web
usability? </FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>6. I couldn't agree more!!</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=072140518-14112006><FONT face=Arial
color=#0000ff size=2>Chris.</FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Glen
Lipka<BR><B>Sent:</B> Tuesday, November 14, 2006 9:49 AM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] How to display error/validation
messages?<BR></FONT><BR></DIV>
<DIV></DIV>
<DIV><A
href="http://glenlipka.kokopop.com/jQuery/inlineError.htm">http://glenlipka.kokopop.com/jQuery/inlineError.htm</A></DIV>
<DIV>This was an early prototype for what is now currently live on all of
Intuit's websites.</DIV>
<DIV> </DIV>
<DIV>From a UX design standpoint, here are some guidelines:</DIV>
<DIV>1. Bigger text fields. Many (most?) users have sketchy vision and
flickering monitors. Make the text boxes bigger and they will be
happier. Same goes for the submit buttons.</DIV>
<DIV>2. Have a visual indication next to required fields (background color,
asterick, something). Make sure they see it.</DIV>
<DIV>3. Do not submit the form if the required fields are not filled in.
(Click sign in on mine to see sample interaction.) Light up the error
fields. Turn them back to normal when the user focuses on them.</DIV>
<DIV>4. Allow for keyboard TAB input as well as mouse click input.
Remember, sometimes users cut/paste.</DIV>
<DIV>5. Give inline errors in red when they screw up (Put an invalid email in
the email field and then click on the next field. This falls into the
design principle called "Contraints". Lego is a great example of how to do
this right. Never allow the user to do something incorrect. Always
disallow bad entry. (Garbage In-Garbage Out) </DIV>
<DIV>6. Eliminate instructions. Users NEVER read instructions, so you
might as well get rid of it and focus on getting them through the process
without it. Users will read phrases and words, but not sentences. As Don
Norman (Godfather of Design) says, "A door that -requires- a sign that says
[Pull] is a porrly designed door". </DIV>
<DIV> </DIV>
<DIV>I hope this is helpful.</DIV>
<DIV><BR>Glen<BR><BR> </DIV>
<DIV><SPAN class=gmail_quote>On 11/14/06, <B class=gmail_sendername>Chris W.
Parker</B> <<A
href="mailto:cparker@swatgear.com">cparker@swatgear.com</A>> wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0px 0px 0px 0.8ex; BORDER-LEFT: #ccc 1px solid">On
Tuesday, November 14, 2006 7:35 AM Klaus Hartl <> said:<BR><BR>> Most
browsers don't focus a field from <BR>> a link pointing to the field's id,
so I usually add a click event to<BR>> explicitly focus the form element.
The field to focus is simply read<BR>> from the link's
href...<BR><BR>Unless I'm misunderstanding your implementation, your problem
is that <BR>you're using the wrong tag. Don't use an anchor+js to link an
error<BR>message with its field. You should be using <label>
instead.<BR><BR><label for="first_name">This field cannot be
empty.</label> <BR><input id="first_name" type="text"
size="20"/><BR><BR>You can have as many <label>s as you want pointing
to the same field.<BR>This will make the browser put focus is the field where
<BR>name="id_of_form_field".<BR><BR><BR><div id="errors"><BR><label
for="first_name">Error with First
Name</label><BR></div><BR><BR><form ...><BR><label
id="first_name">First Name</label> <BR><input id="first_name"
.../><BR></form><BR><BR>Both of the above labels will put focus in
the first_name field when<BR>clicked. Use CSS to style the label(s) however
you
want.<BR><BR><BR>Chris.<BR><BR>_______________________________________________<BR>jQuery
mailing list<BR><A
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
href="http://jquery.com/discuss/">http://jquery.com/discuss/</A><BR></BLOCKQUOTE></DIV><BR></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/