Click here to Skip to main content
16,020,114 members
Articles / Web Development / HTML

How to validate forms with JavaScript

Rate me:
Please Sign up or sign in to vote.
2.00/5 (2 votes)
10 Apr 2007CPOL5 min read 32K   105   4   2
The article details how to validate forms using JavaScript unobtrusively.

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 use JavaScript to validate forms as well. 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.

Resources for this tutorial

Download the sample before beginning this tutorial.

Start by opening the file validate-forms-with-javascript.htm. This is a sample section of the form we're going to make more usable and attractive using JavaScript:

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:

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:

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 the 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 used the getElementsByTagName at the start of the article to create a collection of forms, we used 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 to write an if statement that recognises 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 input with reqEmail and reqQuestion will be validated automatically.

In conclusion

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

  • The form is only validated by JavaScript if JavaScript is enabled.
  • There is 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
Web Developer
United Kingdom United Kingdom

This article was written by Paul McCarthy. 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 loves spending his time working on the world's most accessible CMS and knows an awful lot about accessible web design.


Comments and Discussions

 
Generalwebcredible Pin
toxcct10-Apr-07 7:45
toxcct10-Apr-07 7:45 
GeneralRe: webcredible Pin
AlwiNus11-Apr-07 3:30
AlwiNus11-Apr-07 3:30 
Have you read the 'About Paul S McCarthy' piece? I think he works for Webcredible Wink | ;)

I do think that the resources should be stored on CP, not only an external website. After all, it aren't dozens of megabytes...

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.