1.3 Data Validation

This technique relates to the following sections of the guidelines:

Task:

Validate user input

When the validity of the user input will affect the outcome of an action, all data should be validated. @@needs more details.

Baseline Implications:

HTML only:

All data validation should occur on the server when the form is submitted.   A new page will need to be generated to identify the fields containing errors so the user can find and fix the input issues.  See the general technique about identification of errors on the page and how to indicate required fields.

JavaScript and CSS available and enabled (This is sufficient to satisfy the SC.)

With JavaScript, the onchange event can be used on each individual from control to validate the data as it is entered or changed.  A JavaScript alert can notify the user of the error.  CSS can be used to style the label for the input field to indicate the field in error. See the code example below.

JavaScript and CSS available but disabled

Generally web developers never rely completely on client side vaidation of data.  Once the form is submitted to the server it is good practice to validate all data before processing, even if client side validation has been performed.   In the example below if JavaScript is not available the onchange event will not fire and no client side validation will occur.  The user will not be notified of any errors until the form has been submitted and server side validation has run.  Since the JavaScript function will not be invoked the CSS changes will not occur so there are no implications if CSS is available or not.  If JavaScript is enabled but CSS is not, the error field will receive focus but there will be no visible change to the field.

Example:

The following simple example adds an onchange event to an input field. When the user changes enters a value into this field the value will be checked to make certain it is a valid integer. If the field value is not valid, an alert box will be displayed with an error message. The style of the field will also be chaanged. The field will be displayed in blue with a dashed border. If the field value is valid, the style will be returned to the default. 

<script type="text/javascript">
<!--
var gFocusItem = null;

function checkValue(field) {
	if (field) {
		var fValue = parseInt(field.value, 10);
		if (isNaN(fValue)) {
			field.className = "error";
			alert("Please enter a valid integer");
			gFocusItem = field;
			setTimeout("gFocusItem.focus();", 0);
		}
		else {
			// reset the error class
			field.className="";
		}
	}
	return;
}
// -->
</script>
<style type="text/css">
.error {
	color:blue;
	border: dashed  #0000FF 1px;
}

</style>
</head>
<body>
<h1>Validating a field </h1>
<form action="">
<label for="age">Age: </label><input type="text" size="5"  id="age" onchange="checkValue(this);" ><br>
<label for="first">First Name: </label><input type="text" size="30"  id="first" ><br>
</form>
Usability Implications
Discuss the implications of an onchange event handler. Users who use the keyboard may be annoyed if they want to complete the form in other than the default order. In this example the user can not tab over this field to reach another field until a valid input is entered. @@needs more info.