Article difficulty rating: Easy/ Intermediate

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 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 required resources before beginning this tutorial.

Start by opening the file 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>
<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 labelled 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:

<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 forms 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():

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:

<li><label for="email">E-mail <img src="/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 the 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.

elementsForms = document.getElementsByTagName("form");

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

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:

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 write an if statement that recognises a required class name and validates that <input> field:

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

The completed function should look like this:

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 the class="reqemail" is found by the validation function:

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

The 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:

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:

<form action="#">

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

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):

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 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.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation