Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Javascript

How to validate forms with JavaScript

Rate me:
Please Sign up or sign in to vote.
2.50/5 (2 votes)
13 Jan 2007CPOL4 min read 55.4K   5  
Discover why and how you should use unobtrusive JavaScript to validate forms.

Introduction

Server side validation is the only way to reliably validate forms. Using client-side JavaScript exclusively should be avoided for the following reasons:

  • A device may not have JavaScript available
  • A user might have turned JavaScript off
  • An administrator might have disabled JavaScript on a network

As well as making sure that all your forms are validated on the server, you can also use JavaScript to validate forms. Validating a form twice is not a waste of time as we can use JavaScript to unobtrusively enhance the usability of the form. The unobtrusive JavaScript will stop the form submission if JavaScript is available and speed up the form submission process. As JavaScript is client side, users won't have to wait for the page to reload if errors have been made submitting the form (this is particularly useful to users with slow connections).

So you can see what we're aiming to do, check out this fully functioning example.

Getting started

The form we're going to validate contains just two required fields:

  • E-mail
  • How useful did you find this article?

Both of these fields are required for the form to be submitted. The HTML to create this form is as follows:

HTML
<html>
<head>
<title>Webcredible - JavaScript tutorial - form validation</title>
<style type="text/css">@import "css.css";</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form action="#">
<ul>
<li><label for="email">E-mail <img src="req.gif" alt="Required" /></label>
  <input class="reqemail" id="email" value="" /></li>
<li><label for="question">How useful did you find this article? <img src="req.gif" 
  alt="Required" /></label><input class="reqquestion" id="question" value="" /></li>
</ul>
<input type="submit" value="Submit form" />
</form>
</body>
</html>

The fields are labeled as being required by inserting an image within the <label> tag with alt="required".

onsubmit for testing

Initially we'll also insert an onsubmit with a call to our form validation script. This will help us test the page as the JavaScript develops. It'll be removed at the end of this article and a function call will be assigned to the form itself with JavaScript.

We'll insert the HTML extra code as follows:

HTML
<form onSubmit="validateForms()" action="#">

The JavaScript

We'll create a JavaScript file and call it js.js. The function we've called on the onsubmit command is called validateForms(), so we start by creating that empty function at the start of the js.js file:

JavaScript
function validateForms()
{
}

The validateForms() function is the root function that will be used to control how the form is validated. The validation script will then be applied to all forms. Let's start by getting an HTML object collection of any form on the HTML page:

JavaScript
function validateForms()
{
    if (!document.getElementsByTagName) return false;
    elementsForms = document.getElementsByTagName("form");
}

Looping

The next step in the validation process is to loop through the forms and validate them. All forms will be handled in the same way. We'll do this using a for loop to loop through the HTML object collection, with each form being passed to a new function called validateForm():

JavaScript
function validateForms()
{
    if (!document.getElementsByTagName) return false;
    elementsForms = document.getElementsByTagName("form");
    for (var intCounter = 0; intCounter < elementsForms.length; intCounter++)
    {
        validateForm(elementsForms[intCounter])
    }
}
function validateForm(currentForm)
{
}

Task order

At this point, it's probably useful to stop and think about how we might implement the JavaScript validation. If we return to the form HTML, you will, of course, have noticed that we've applied a class to each of the required <input>s:

HTML
<li><label for="email">E-mail <img src="http://www.codeproject.com/i/req.gif" 
  alt="Required" /></label><input class="reqemail" id="email" value="" /></li> 

The e-mail <input> has class="reqemail" assigned to it and the question <input> has class="reqquestion". These will be used to identify the <input>s to the JavaScript as requiring validation and defining what type of validation they require. We can now use getElementsByTagName to access the class definitions on each of the inputs. When we use the getElementsByTagName at the start of the article to create a collection of forms, we use the entire document as its parent.

JavaScript
elementsForms = document.getElementsByTagName("form");

We can also get all <input>s contained by the form that we've passed to the validateForm(currentForm) function:

JavaScript
function validateForm(currentForm)
{
    var blnvalidate = true;
    var elementsInputs;

    elementsInputs = currentForm.getElementsByTagName("input");
}

The next step is to loop through the <input>s as we did at the start of the article with the forms:

JavaScript
function validateForm(currentForm)
{
    var blnvalidate = true;
    var elementsInputs;

    elementsInputs = currentForm.getElementsByTagName("input");
    for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++)
    {
    }
}

The final step in this function is writing an if statement that recognizes a required class name and validates that <input> field:

JavaScript
if (elementsInputs[intCounter].className == "reqemail")
{
    if (validateEmail(elementsInputs, intCounter))
    {
        alert('Please insert a valid email');
    }
}

The completed function should look like this:

JavaScript
function validateForm(currentForm)
{
    var blnvalidate = true;
    var elementsInputs;

    elementsInputs = currentForm.getElementsByTagName("input");
    for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++)
    {
        if (elementsInputs[intCounter].className == "reqquestion")
        {
            if (validateText(elementsInputs, intCounter))
            {
                blnvalidate = true;
                alert('You have not let us know what you think of the article');
            }
        }
        else if (elementsInputs[intCounter].className == "reqemail")
        {
            if (validateEmail(elementsInputs, intCounter))
            {
                blnvalidate = true;
                alert('Please insert a valid email');
            }
        }
    }
    return blnvalidate;
}

With the function complete, we've now identified all <input> fields that have a required class. All other <input>s will be ignored by the script. The email and question items must now be validated.

Validation

To validate the email, we'll create a simple function using a Regular Expression to check if the e-mail is valid. This is called when class="reqemail" is found by the validation function:

JavaScript
function validateEmail(elementsInputs, intCounter)
{
    var emailFilter=/^.+@.+\..{2,3}$/;
    if (!emailFilter.test(elementsInputs[intCounter].value))
    {
        return true;
    }
}

validateEmail(elementsInputs, intCounter) will return true if the e-mail address isn't valid. In the above example, this triggers an alert in the validateForm(currentForm) function. We'll check to see if the 'How useful did you find this article?' <input> has any text entered:

JavaScript
function validateText(elementsInputs, intCounter)
{
    if (elementsInputs[intCounter].value == "")
    {
        return true;
    }
}

Separating HTML, JavaScript, and CSS

The final task is to remove all JavaScript from the HTML page. The onsubmit function we applied to the <form> at the start of the article can now be removed and we can apply the function call validateForms() to all forms. The opening <form> tag should now read as follows:

HTML
<form action="#">

We should now apply the form onsubmit function call to all form tags within the .js file.

JavaScript
function validateForms()
{
    elementsForms = document.getElementsByTagName("form");
    for (var intCounter = 0; intCounter < elementsForms.length; intCounter++)
    {
        elementsForms[intCounter].onsubmit = function ()
        {
            return validation(this);
        }
    }
}

Finally, we register the event using the following script at the bottom of the js file (for more information about registering events, see Simon Willison's Weblog):

JavaScript
function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}
addLoadEvent(validateForms);

If JavaScript is enabled, then the function call is applied to all forms and any inputs with reqEmail and reqQuestion will be validated automatically.

In conclusion

This solution demonstrates the key advantages in using JavaScript to progressively enhance a form:

  • The form is only validated by JavaScript if JavaScript is enabled.
  • There's no JavaScript contained within the HTML, potentially separating web design from web development.
  • Any errors, future enhancements can easily be made to a single file, significantly cutting down on development time.

Check out this fully functioning example.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United Kingdom United Kingdom
This article was written by Paul McCartny. Paul's crazy about CSS and using JavaScript for good (not evil) - so crazy that he works for Webcredible helping to make the Internet a better place for everyone. He knows an awful lot about DOM scripting & accessible JavaScript and accessible web design.

Comments and Discussions

 
-- There are no messages in this forum --