<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:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;
color:black;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor=white lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal><span style='color:#1F497D'>Roger,<o:p></o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'>Yes, an error or errormsg
attribute that one can set at the server side since the message you’d
want the user to see will most likely be determined by business rules.<o:p></o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'>Spec-ing how UAs should display
the message may be a bit much but we should have a way of hooking into the
validation process and overriding the displaying of messages. Say an event called
onaftervalidation for example, (which is fired after all validations have been
run), where the event could provide a collection of elements that did not pass the
validation logic.<o:p></o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'>>and
that if it is: <input size="20" name="email"
id="email" error="" type="email" required><br>
>or if it is <input size="20" name="email"
id="email" type="email" required><br>
>then the built in browser error message for type="email" should
be shown?<br>
<br>
<o:p></o:p></span></p>
<div>
<p class=MsoNormal><span style='color:#1F497D'>Yes, then the browser should
show highlight the error in the way they see fit. As of today, they each (those
that do support validation) have their own way. Some simply highlight the field
and others (Opera) show a box under the field. But they each call out only one
field at a time.<o:p></o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'>Shiv<o:p></o:p></span></p>
<p class=MsoNormal><span style='color:#1F497D'><a
href="http://exposureroom.com/"><span style='color:blue'>http://exposureroom.com</span></a><o:p></o:p></span></p>
</div>
<p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p>
<div>
<div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'>
<p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif";
color:windowtext'>From:</span></b><span style='font-size:10.0pt;font-family:
"Tahoma","sans-serif";color:windowtext'> whatwg-bounces@lists.whatwg.org
[mailto:whatwg-bounces@lists.whatwg.org] <b>On Behalf Of </b>Roger Hågensen<br>
<b>Sent:</b> Monday, September 20, 2010 7:03 PM<br>
<b>To:</b> whatwg@lists.whatwg.org<br>
<b>Subject:</b> Re: [whatwg] Form element invalid message<o:p></o:p></span></p>
</div>
</div>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>On 2010-09-21 00:38, Shiv Kumar wrote: <o:p></o:p></p>
<p class=MsoNormal>Scenario 1:<o:p></o:p></p>
<p class=MsoNormal>We now have the option define if an element is required and the
form will validate the value such elements before submission. That’s a
step in the right direction. However, it so happens different implementation do
different things in the case when the validation return false.<o:p></o:p></p>
<p class=MsoNormal> <o:p></o:p></p>
<p class=MsoNormal>Some browsers, have no visual indication (probably due to
lack of support at this time)<o:p></o:p></p>
<p class=MsoNormal>Some browsers will outline the field in question<o:p></o:p></p>
<p class=MsoNormal>Some will pop up a message under the field in question. The
message is something cryptic like “You have to specify a value”.<o:p></o:p></p>
<p class=MsoNormal> <o:p></o:p></p>
<p class=MsoNormal>Scenario 2:<o:p></o:p></p>
<p class=MsoNormal>That’s one aspect I’d like to talk about. The
other aspect is that typically, you don’t want to show only one error as
a time to the end user. You want to show them all validation errors after
trying to submit the form one time (this is the common practice as well),
rather than forcing them to submit a form multiple times to discover validation
issues one by one. As you can imagine this is a nightmare for the end-user.<o:p></o:p></p>
<p class=MsoNormal> <o:p></o:p></p>
<p class=MsoNormal>For the first scenario I’d like to propose that we
have a validationMessage attribute (or some other name) that allows web
developers to specify a more appropriate (based on the type of input data
required and/or the input type such as text, url, email etc.), user
friendly/business friendly and creative error message rather than some unknown
message (as different vendors will likely have their own verbiage). <o:p></o:p></p>
<p class=MsoNormal> <o:p></o:p></p>
<p class=MsoNormal>For the second scenario I guess the spec should be clear
about validating all fields? I’m not sure what the spec for this is (I
can’t seem to find anywhere that details the validation process for
forms).<o:p></o:p></p>
<p class=MsoNormal> <o:p></o:p></p>
<p class=MsoNormal>What are your thoughts on the above?<o:p></o:p></p>
<p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><br>
Hmm! Like a error="" attribute or something like that, which is shown
instead of a generic built in browser message?<br>
<br>
Take this example <a href="http://www.quirksmode.org/dom/error.html">http://www.quirksmode.org/dom/error.html</a><br>
<br>
<br>
I assume you wish to be able to do this instead:<br>
<input size="20" name="email" id="email"
error="A valid email must be entered!" type="email"
required><br>
<br>
and that if it is: <input size="20" name="email"
id="email" error="" type="email" required><br>
or if it is <input size="20" name="email"
id="email" type="email" required><br>
then the built in browser error message for type="email" should be
shown?<br>
<br>
This still leaves the question of where/how to display the error.<br>
Some might want a Balloontip happening when the field looses focus (this
is how the Windows OS does it) and saves the most IMO, the error text could be
shown then.<br>
<br>
If the browser does not behave like that but only when pressing submitting then
marking the fields and perhaps provide a mouseover tip explaining the error
(the error text could be shown then)<br>
<br>
Or the error text could be shown like in that example, but that wold require a
"errorfor" or similar to how label for behaves.<br>
<br>
<br>
I think it would be just best to spec it so that a Balloontip with the browser
error message (or the input field's custom error message) is displayed at the
field loosing focus, and optionally keeping the field highlighted until the
input is acceptable, thus allowign the user to fill out the rest of the form
and fix the error last, and not allow submission unless all errors are fixed
obviously, and if no fields been filled and the user tries to submit then all
required fields would be highlighted, maybe a default OS error "ding"
should be played too.<br>
<br>
I believe this is the best UI implementation as it's instant feedback based.<br>
<br>
<br>
<br>
<o:p></o:p></span></p>
<pre>-- <o:p></o:p></pre><pre>Roger "Rescator" Hågensen.<o:p></o:p></pre><pre>Freelancer - <a
href="http://EmSai.net/">http://EmSai.net/</a><o:p></o:p></pre></div>
</body>
</html>