Clever Form Validation With JavaScript Tutorial

JavaScript has plenty of functions that can be used to create validation scripts. As this is a very popular function of JavaScript, we'll spend this tutorial evolving more and more fancy means of validating your forms and keeping your visitors happy!

1. A Basic Form Layout

We'll start this tutorial by defining a simple form where a user enters their name, age and address. We'll use a table with two columns for the form, and use a few CSS classes to make the form look presentable. The main part of the form is shown below, but you may inspect the source if you wish to see more.

<table>
<tr>
<td class="prop">Name:</td>
<td>
<input type="text" name="name" class="formElement" />
</td>
</tr>
<tr>
<td class="prop">Age:</td>
<td>
<input type="text" name="age" class="formElement" />
</td>
</tr>
<tr>
<td class="prop">Address:</td>
<td>
<textarea name="address" class="formElement" rows="4"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="Send" class="button" />
</td>
</tr>
</table>

If you click the "Send" button on the form, it directs straight to a "thank you" page. In reality the form would send its data to a server script which would save the information in some manner first.

2. Stopping the Form Submitting

The problem is that the form doesn't check that the fields haven't been filled in. Either, the server script will check the form and re-direct the user, taking extra time and causing inconvenience to the user, or the server script will simply add blank data into its database.

We need some means of stopping the button from submitting if there is a problem with the form. Fortunately there is an onSubmit event which we can use. The onSubmit function is run just before the form is submitted and can programmatically stop the form submitting if necessary.

<script type="text/javascript">

    function submitForm() {
        alert("Submitting");
        return false;
    }

</script>

...

<form action="thankyou.html" onSubmit="return submitForm();">

The form calls our submitForm() function here, which displays a message (just so we can see that it's running), and returns false. A useful attribute of events in JavaScript such as the onSubmit event, is that the function the browser would normally perform can be cancelled if we return a false value to it.

Hence when the user clicks the "Send" button, the form will not submit itself.

3. Determining if the form is Valid

Now that we've seen how a form works with no validation at all, and also how to stop a form from submitting completely, we need to make sure that our form is only submitted when it fulfils certain requirements.

To do this we have to read the values in the text boxes and see if they match our criteria. If they do, we'll return true and allow the form to submit, otherwise we'll return false and display an error message.

<script type="text/javascript">

    function submitForm() {

        var name = document.getElementById("name").value;
        var age = document.getElementById("age").value;
        var address = document.getElementById("address").innerText;

        var message = "";

        if (name == "") message += "Please enter your name";
        if (age == "") message += "\nPlease enter your age";
        if (address == "") message += "\nPlease enter your address";

        if (message == "") {
            // allow the form to be submitted
            return true;
        } else {
            // error messages exist
            alert(message);
            return false;
        }

    }

</script>

Here we've improved our submitForm() function. We use the document.getElementById() function to return each object. In the case of the first two input boxes, we get the entered value using the value property; in the case of the textarea, we get the data using the innerText property.

We then use a few if statements to check if each field is entered correctly, and return the appropriate value.

To be continued...

Back to tutorials