[jQuery] How to display error/validation messages?
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Great points, I’m saving this thread
for inspiration the next time I have a form to build… I love this list </span></font><font
size=2 color=navy face=Wingdings><span style='font-size:10.0pt;font-family:
Wingdings;color:navy'>J</span></font><font size=2 color=navy face=Arial><span
style='font-size:10.0pt;font-family:Arial;color:navy'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-ALEX<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Glen Lipka
<b><span style='font-weight:bold'>Sent:</span></b> Tuesday, November 14, 2006
9:49 AM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] How to
display error/validation messages?</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><a href="http://glenlipka.kokopop.com/jQuery/inlineError.htm">http://glenlipka.kokopop.com/jQuery/inlineError.htm</a><o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>This was an early prototype for what is now currently live on all of
Intuit's websites.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>From a UX design standpoint, here are some guidelines:<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>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.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>2. Have a visual indication next to required fields (background color,
asterick, something). Make sure they see it.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>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.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>4. Allow for keyboard TAB input as well as mouse click input.
Remember, sometimes users cut/paste.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>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) <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>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". <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> <o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I hope this is helpful.<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
Glen
<o:p></o:p></span></font>
</div>
<div>
<p class=MsoNormal><span class=gmailquote><font size=3 face="Times New Roman"><span
style='font-size:12.0pt'>On 11/14/06, <b><span style='font-weight:bold'>Chris
W. Parker</span></b> <<a href="mailto:cparker@swatgear.com">cparker@swatgear.com</a>>
wrote:</span></font></span> <o:p></o:p>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>On Tuesday, November 14, 2006 7:35 AM Klaus Hartl <> said: