Javascript Form

JavaScript Form Validation

There's nothing more troublesome than receiving orders, guestbook entries, or other form submitted data that are incomplete in some way. You can avoid these headaches once and for all with JavaScript's amazing way to combat bad form data with a technique called "form validation".

The idea behind JavaScript form validation is to provide a method to check the user entered information before they can even submit it. JavaScript also lets you display helpful alerts to inform the user what information they have entered incorrectly and how they can fix it. In this lesson we will be reviewing some basic form validation, showing you how to check for the following:

•      If a text input is empty or not
  
•      If a text input is all numbers
  
•      If a text input is all letters
  
•      If a text input is all alphanumeric characters (numbers & letters)
  
•      If a text input has the correct number of characters in it (useful when restricting the length of a username and/or password)
  
•      If a selection has been made from an HTML select input (the drop down selector)
•      If an email address is valid
•      How to check all above when the user has completed filling out the form

This lesson is a little long, but knowing how to implement these form validation techniques is definitely worth the effort on your part. Remember to check out Hiscript's HTML forms lesson if you need to brush up on your form knowledge.

Form Validation Checking for Non Empty

To warm up our JavaScript Date object skills, let's do something easy. If you do not supply any arguments to the Date constructor (this makes the Date object) then it will create a Date object based on the visitor's internal clock.

// If the length of the element's string is 0 then display helper message

function notEmpty(elem, helperMsg){

    if(elem.value.length == 0){

        alert(helperMsg);

        elem.focus(); // set the focus to this input

        return false;

    }

    return true;

}

 

The function notEmpty will check to see that the HTML input that we send it has something in it. elem is a HTML text input that we send this function. JavaScriptstrings have built in properties, one of which is the length property which returns the length of the string. The chunk of code elem.value will grab the string inside the input and by adding on length elem.value.length we can see how long the string is.

As long as elem.value.length isn't 0 then it's not empty and we return true, otherwise we send an alert to the user with a helperMsg to inform them of their error and return false.

Form Validation Checking for All Numbers

If someone is entering a credit card, phone number, zip code, similar information you want to be able to ensure that the input is all numbers. The quickest way to check if an input's string value is all numbers is to use a regular expression /^[0-9]+$/  that will only match if the string is all numbers and is at least one character long.

// If the element's string matches the regular expression it is all numbers

function isNumeric(elem, helperMsg){

    var numericExpression = /^[0-9]+$/;

    if(elem.value.match(numericExpression)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}

 

What we're doing here is using JavaScript existing framework to have it do all the hard work for us. Inside each string is a function called match that you can use to see if the string matches a certain regular expression. We accessed this function like so: elem.value.match(expressionhere).

We wanted to see if the input's string was all numbers so we made a regular expression to check for numbers [0-9] and stored it as numericExpression.

We then used the match function with our regular expression. If it is numeric then match will return true, making our if statement pass the test and our function isNumeric will also return true. However, if the expression fails because there is a letter or other character in our input's string then we'll display our helperMsg and return false.

Form Validation Checking for All Letters

This function will be identical to isNumeric except for the change to the regular expression we use inside the match function. Instead of checking for numbers we will want to check for all letters.

If we wanted to see if a string contained only letters we need to specify an expression that allows for both lowercase and uppercase letters: /^[a-zA-Z]+$/ .

// If the element's string matches the regular expression it is all letters

function isAlphabet(elem, helperMsg){

    var alphaExp = /^[a-zA-Z]+$/;

    if(elem.value.match(alphaExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}

 

Form Validation Checking for Numbers and Letters

By combining both the isAlphabet and isNumeric functions into one we can check to see if a text input contains only letters and numbers.

// If the element's string matches the regular expression it is numbers and letters

function isAlphanumeric(elem, helperMsg){

    var alphaExp = /^[0-9a-zA-Z]+$/;

    if(elem.value.match(alphaExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}

 

Form Validation Restricting the Length

Being able to restrict the number of characters a user can enter into a field is one of the best ways to prevent bad data. For example, if you know that the zip code field should only be 5 numbers you know that 2 numbers is not sufficient.

Below we have created a lengthRestriction function that takes a text field and two numbers. The first number is the minimum number of characters and the second is the maximum number of a characters the input can be. If you just want to specify an exact number then send the same number for both minimum and maximum.

function lengthRestriction(elem, min, max){

    var uInput = elem.value;

    if(uInput.length >= min && uInput.length <= max){

        return true;

    }else{

        alert("Please enter between " +min+ " and " +max+ " characters");

        elem.focus();

        return false;

    }

}

 

Form Validation Selection Made

To be sure that someone has actually selected a choice from an HTML select input you can use a simple trick of making the first option as helpful prompt to the user and a red flag to you for your validation code.

By making the first option of your select input something like "Please Choose" you can spur the user to both make a selection and allow you to check to see if the default option "Please Choose" is still selected when the submit the form.

function madeSelection(elem, helperMsg){

    if(elem.value == "Please Choose"){

        alert(helperMsg);

        elem.focus();

        return false;

    }else{

        return true;

    }

}

 

Form Validation Email Validation

And for our grand finale we will be showing you how to check to see if a user's email address is valid. Every email is made up for 5 parts:

   1. A combination of letters, numbers, periods, hyphens, plus signs, and/or underscores
   2. The at symbol @
   3. A combination of letters, numbers, hyphens, and/or periods
   4. A period
   5. The top level domain (com, net, org, us, gov, ...)

Valid Examples:

    * bobby.jo@filltank.net
    * jack+jill@hill.com
    * the-stand@steven.king.com

Invalid Examples:

    * @deleted.net - no characters before the @
    * free!dom@bravehe.art - invalid character !
    * shoes@need_shining.com - underscores are not allowed in the domain name

The regular expression to check for all of this is a little overkill and beyond the scope of this tutorial to explain thoroughly. However, test it out and you'll see that it gets the job done.

function emailValidator(elem, helperMsg){

    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

    if(elem.value.match(emailExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}

 

Validating a Form All at Once

If you've made it this far I commend you, but we're not done yet! The final step is to be able to perform all of these validation steps when the user is ready to submit their data.

Each form has a JavaScript event called onSubmit that is triggered when its submit button is clicked. If this even returns 0 or false then a form cannot be submitted, and if it returns 1 or true it will always be submitted. Wouldn't it be perfect if we could somehow make an if statement that said "If the form is valid submit it (1) else don't submit it (0)"? Well with a master formValidator function we can do just that.

formValidator will be somewhat like a list of checks that we want to do before a form is submitted. But before we can decide what we want to check for, we need to have our form!

<form onsubmit='return formValidator()' >

First Name: <input type='text' id='firstname' /><br />

Address: <input type='text' id='addr' /><br />

Zip Code: <input type='text' id='zip' /><br />

State: <select id='state'>

    <option>Please Choose</option>

    <option>AL</option>

    <option>CA</option>

    <option>TX</option>

    <option>WI</option>

</select><br />

Username(6-8 characters): <input type='text' id='username' /><br />

Email: <input type='text' id='email' /><br />

<input type='submit' value='Check Form' /><br />

</form>

That's a lot of data to verify and the first thing we would probably want to check is that each field was at least filled out. To check for completion we will ensure no fields are empty and that the SELECT field has a selection. Here are the starting pieces of our master validation function formValidator.

All Together Now

Below we have taken the HTML form code and the new function formValidator and plugged in all the other form validation functions taught in this lesson that are referenced in formValidator.

<script type='text/javascript'>



function formValidator(){

    // Make quick references to our fields

    var firstname = document.getElementById('firstname');

    var addr = document.getElementById('addr');

    var zip = document.getElementById('zip');

    var state = document.getElementById('state');

    var username = document.getElementById('username');

    var email = document.getElementById('email');

    

    // Check each input in the order that it appears in the form!

    if(isAlphabet(firstname, "Please enter only letters for your name")){

        if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){

            if(isNumeric(zip, "Please enter a valid zip code")){

                if(madeSelection(state, "Please Choose a State")){

                    if(lengthRestriction(username, 6, 8)){

                        if(emailValidator(email, "Please enter a valid email address")){

                            return true;

                        }

                    }

                }

            }

        }

    }

    

    

    return false;

    

}



function notEmpty(elem, helperMsg){

    if(elem.value.length == 0){

        alert(helperMsg);

        elem.focus(); // set the focus to this input

        return false;

    }

    return true;

}



function isNumeric(elem, helperMsg){

    var numericExpression = /^[0-9]+$/;

    if(elem.value.match(numericExpression)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}



function isAlphabet(elem, helperMsg){

    var alphaExp = /^[a-zA-Z]+$/;

    if(elem.value.match(alphaExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}



function isAlphanumeric(elem, helperMsg){

    var alphaExp = /^[0-9a-zA-Z]+$/;

    if(elem.value.match(alphaExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}



function lengthRestriction(elem, min, max){

    var uInput = elem.value;

    if(uInput.length >= min && uInput.length <= max){

        return true;

    }else{

        alert("Please enter between " +min+ " and " +max+ " characters");

        elem.focus();

        return false;

    }

}



function madeSelection(elem, helperMsg){

    if(elem.value == "Please Choose"){

        alert(helperMsg);

        elem.focus();

        return false;

    }else{

        return true;

    }

}



function emailValidator(elem, helperMsg){

    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

    if(elem.value.match(emailExp)){

        return true;

    }else{

        alert(helperMsg);

        elem.focus();

        return false;

    }

}

</script>



<form onsubmit='return formValidator()' >

First Name: <input type='text' id='firstname' /><br />

Address: <input type='text' id='addr' /><br />

Zip Code: <input type='text' id='zip' /><br />

State: <select id='state'>

    <option>Please Choose</option>

    <option>AL</option>

    <option>CA</option>

    <option>TX</option>

    <option>WI</option>

</select><br />

Username(6-8 characters): <input type='text' id='username' /><br />

Email: <input type='text' id='email' /><br />

<input type='submit' value='Check Form' />

</form>