Form Validation on the Client Side

Forms validation on the client-side is essential -- it saves time and bandwidth, and gives you more options to point out to the user where they've gone wrong in filling out the form. Having said that, I don't mean that you don't need server-side validation. People who visit your site may use an old browser or have JavaScript disabled, which will break client-only validation. Client and server-side validation complement each other, and as such, they really shouldn't be used independently.

Why is Client Side Validation Good?

There are two good reasons to use client-side validation:

1. It's a fast form of validation: if something's wrong, the alarm is triggered upon submission of the form.


2. You can safely display only one error at a time and focus on the wrong field, to help ensure that the user correctly fills in all the details you need.

Two Major Validation Approaches

The two key approaches to client-side form validation are:

• Display the errors one by one, focusing on the offending field
• Display all errors simultaneously, server-side validation style

While displaying all errors simultaneously is required for server-side validation, the better method for validation on the client-side is to show one error at a time. This makes it possible to highlight only the field that has been incorrectly completed, which in turn makes revising and successfully submitting the form much easier for the visitor. If you present users with all errors at the same time, most people will try to remember and correct them at once, instead of attempting to re-submit after each correction.

Given these advantages, I'll focus only on validation methods that display one error at a time.

How to Validate Forms

Take for example the following code fragment:

<script type="text/javascript" language="javascript">
function validateMyForm() {
if (parseInt(document.forms[0].phone.value)  
       != document.forms[0].phone.value) {
alert('Please enter a phone number, numbers only');
return false;
}

return true;
}
</script>

<form action="handler" onsubmit="return validateMyForm();">
<p>Phone: <input type="text" id="phone" name="phone" /></p>

<p><input type="submit" value="Send" /></p>
</form>

What's wrong here? Well, if you add another form before this one, the code will try to validate the wrong form.

A better approach would be to include a form name:

function validateMyForm() {
if (parseInt(document.forms.myForm.phone.value)  
       != document.forms.myForm.phone.value) {

<form id="myForm" name="myForm" action="handler"  
onsubmit="return validateMyForm();">

This is definitely better, but still not portable enough -- if you want to reuse some of this validation on another form, you'll have to do a lot of text replacing first.

So let's remove the form name:

function validateMyForm(form) {
if (parseInt(form.phone.value) != form.phone.value) {

<form action="handler" onsubmit="return validateMyForm(this);">

This last method makes use of the object this, which always points to the current object. This makes our code more portable, and saves typing.

Now how about making visitors' lives a lot easier? Let's focus on the field that triggered the error, instead of making them find it on their own.

function validateMyForm(form) {
if (parseInt(form.phone.value) != form.phone.value) {
alert('Please enter a phone number, numbers only');
form.phone.focus();
form.phone.select();
return false;
}

With these changes, the browser will focus on the incorrectly filled out field, and even select the text for the visitor. If scrolling is needed, this will also happen automatically.