HTML Forms Validation On The Client Side

Form validation on the client-side is essential - it saves time and bandwidth; you also have better control to show the user the wrong field. This comparison of different validation methods includes comments for improving portability and maintainability.

Why is Client Side Validation Good

It is fast, if something is wrong the alarm is triggered upon submission of the form

You can safely display only one error at a time and focus on the wrong field

Two Major Validation Approaches

Display the errors one by one, focusing on the offending field

Display all errors, server-side validation style

While displaying all errors is needed in case of server validation, the better method for client validation is to show one error at a time. This makes it possible to highlight the wrong field, making it a lot easier for the visitor. If you print all errors most people would also try to remember and correct them at once instead of trying to submit after each correction.

Considering these advantages I will 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>

So what's wrong: If you add another form before this one the code will try to validate the wrong one.

Note: JavaScript is case sensitive, the value which is assigned to the HTML id/name attribute is also case sensitive.

A better approach would be to add 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 the validation for another form you will have to do a lot of text replacing.

Let's remove the form name:

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

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

The last method makes use of the this object which always points to the current object, making our code more portable and saving keystrokes.

Now how about making visitors' lives a lot easier and focus 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 the wrong field and even select the text for the visitor, if scrolling is needed it will also happen automatically.

That was pretty good, but don't you feel that it's a little too much code for every single field? If we create a simple library of functions we can save lots of typing and download time for the page.

Well next we'll do exactly this and define our basic functions that make validation code even shorter.

function validateNumber(field, msg, min, max) {
    	if (!min) { min = 0 }
    	if (!max) { max = 255 }
    	if ( (parseInt(field.value) != field.value) ||
    field.value.length < min ||
    field.value.length > max) {
        		alert(msg);
        		field.focus();
        		field.select();
        		return false;
    	}
   	return true;
}

This function does a simple validation of a number - it checks whether the field contains digits only, and optionally if it is within a given range.
We are passing the error message as a parameter to it, to use such a function we can basicly add it to the onsubmit handler like:

<form action="handler"
   	onsubmit="return validateNumber(this.phone,
   'Please enter a phone number, digits only', 5, 10);">

So called it will check if the phone is numeric, it is more than 5 digits and less than 10. Note how the phone object is passed as a parameter, this allows us to focus it via the helper function as opposed to passing the value of the field only.

Another method for validating numbers is to require them to be in a given range, to make the function do this kind of checks simply change the check line to:

if ((parseInt(field.value) != field.value) ||
field.value < min ||
field.value > max) {

If you want to apply more than one checks to the form you can embed several rules in the onsubmit handler, imagine that we also require first and last name to be entered:

<form action="handler"
   onsubmit="return (
   validateNumber(this.phone,
    'Please enter a phone number, numbers only', 5, 10) &&
   validateString(this.firstName,
    'Please enter your first name', 3, 15) &&
   validateString(this.lastName,
    'Please enter your last name', 3, 15)
   );">

The code requires all validation rules to evaluate to true (with the logical AND - &&). A closer look reveals the fact that it is very easy to generate such code from a server scripting language, but that's a whole another article.

function validateString(field, msg, min, max) {
       	if (!min) { min = 1 }
       	if (!max) { max = 65535 }

       	if (!field.value || field.value.length < min || field.value.max > max) {
          		alert(msg);
          		field.focus();
          		field.select();
          		return false;
       	}

       	return true;
}

As you can see the string validation function looks more or less the same; you can also write other functions and combine them with these too.

A common field required in many forms on the web is the email, there're lots of functions I've seen but usually the simplest and easiest way to validate an email is using regular expressions.

We'll extend the function, making it possible to define the field as optional.

function validateEmail(email, msg, optional) {
    	if (!email.value && optional) {
        		return true;
    	}
    	var re_mail = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z])+$/;
    	if (!re_mail.test(email.value)) {
        		alert(msg);
        		email.focus();
        		email.select();
        		return false;
    	}
    	return true;
}

To validate a required email you should call it as validateEmail(this.email, 'Please enter your email address') and if you want it to be optional: validateEmail(this.email, 'Please enter a correct email address or leave the field blank', true).

JavaScript cannot be used on its own for validation, but it helps a lot if you have it. The more compact code you embed in your HTML, the better - it saves download time and search engines will like you.

About the Author:

Martin Tsachev has been developing for the web since 2001. He's currently working as a web developer at Make-a-Store, Inc.. Martin's personal site mtWeb can be found at Martin.f2o.org.

HTML Forms Validation On The Client Side
Form validation on the client-side is essential - it saves time and bandwidth; you also have better control to show the user the wrong field. This comparison of different validation methods includes comments for improving portability and maintainability.
Securing PHP Web Applications
Common security holes and suggestions for resolving potential data compromise scenarios.
Client Side Scripting
However, this is not to say that other technologies are not extremely useful. Several technologies have proven to be just as important as CGI for the average Internet developer. These technologies focus on putting the demands of computation in the hands of the client instead of the server...
Why is Validation Important?
Validation in your webpages is very important as proven in this tutorial. In this tutorial youll learn about Validation and how you should be making the effort to get validated!
CSS Validation and HTML
HTML validation and CSS validation are controversial issues with some people. This article discusses some of the issues that have come increasingly to the fore in web development. The article will also provide a practical method that overworked webmasters can use to improve their website.
Code Validation & Compliancy - The New Beginning XHTML
Code validation is still widely debated as to whether it is required for performance within the search engines. It is only a guess that the search engines dont utilise it within their algorithm, but nobody is actually 100% sure on that fact...
7 Benefits of HTML Validation
You may not bother with html validation or writing simple and clean code when designing your web site. Later you may find your site is slow loading, appears incorrectly in the main browsers and does not rank well for the major search engines...
Form Validation
Learn the different ways of validating your form with Javascript.
What are XForms?
HTML forms, such as email forms and order forms, are perhaps the most important components of a website. Without forms, webmasters would not be able to collect information from their site visitors, and they would not be able to accept online credit card orders from their customers...
Why do you Need a Validated Website?
This is a very good article for new designers or designers who are big on the visuals but not the programming. Why do you Need a Validated Website? - the author explains it really well.