Client Side Techniques (Techniques XML Submission Form)

 checkbox checked

Submission Results:

Technology: Client Side Techniques 
Techniques Category: Script techniques 
Submitter's Name: Becky Gibson 
Submitter's Email:

<technique id="UNKNOWN">
<short-name>identify errors to user</short-name>
 <guideline idref="" />
 <success-criterion idref="UNKNOWN" />


<p>If a user error is detected, the error is identified and provided to the user in text</p>

Display an error message when validation of an input field fails.  The error message is in the same vicinity on the page as the invalid field.  Set focus to the error message so it is brought to the attention of the user.  Pressing tab after focus has been given to the error message will bring the user to the field that contains the error so it can be corrected.  


 <affects group="UNKNOWN" />

This technique uses CSS and JavaScript on an XHTML page.  

It uses a hidden, read only input element to define the error text. The hidden error text is located on the page just before the input field that the error text references.

This example has an input field and a button which invokes JavaScript to validate the field.  If the field is invalid, the style class of the hidden read only input field containing the error text is changed to make it visible, bold and red in color. Focus is programmtically set to this read only input field.  Note: Focus can be programmatically set to this field since it is a form element. 

When focus is set to this field, a screen reader will speak the error text.  And the next tab press by the user will bring him to the invalid field to correct the error.  When the field validates properly, the style of the error field is set back to hidden so it no longer displays.   The screen readers and browsers tested all respect the visibility:hidden style on the field and do not display or speak it when it is hidden.  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<html xmlns="" xml:lang="en" lang="en">


<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Testing Invalid Role</title>

<style type="text/css">

.errOff {













<script language="javascript" type="text/JavaScript">


var errSuffix = "Err";

var isIE = false;

if (navigator.userAgent.indexOf("MSIE") != -1) {

	isIE = true;


function validate(iFieldId) {

	// simple validation test - don't try me with other than integers, please!

	var iField = document.getElementById(iFieldId);

	var intValue = parseInt(iField.value,10);

	var errMsgId = ( + errSuffix); // error message is named the same as associated field + errSuffix

	var errMsg = document.getElementById(errMsgId);

	if ((intValue != NaN) && (intValue >0) && (intValue <11)) {



	else {




	return false;  // never submit






<form action="demo">

<div>Using read only input for error text</div>

<label for="iValueErr" style="display:none">Error Message</label><input class="errOff" id="iValueErr" readonly="readonly" value="Error: The entry&rsquo;s invalid - please enter an integer between &quot;1 and 10&quot;" /><br/>

<label for="iValue">Enter an Integer between 1 and 10</label><input type="text" id="iValue" />

<input type="button" onclick="validate('iValue');"value="Validate Input" /><br/>




This technique works in Windows with IE 6.0.2800.1106 sp1; Mozilla 1.8a3; Firefox 0.9.2; Opera 7.54; and Jaws 4.51.131 and WindowEyes 4.5sp3 in IE.   

The one drawback is that the screen readers will indicate that the field is an edit field since it is a readonly input field that is used to display the message.  As long as the error text is descriptive this should not be a problem.

Some browsers do not draw a focus highlight around the read only input field when it is given focus. This could be improved by updating the style to include a border.  

<see-also><br />&lt;p>
 <loc href="" >Guideline 2.5 </loc>
</p><br /></see-also>

Additional Notes:

Received on Friday, 13 August 2004 17:10:05 UTC