Practical Ecommerce

Video Tutorial: Validating A Form With JavaScript

View Tutorial In form validation two common questions often arise. The first is how do you ensure once you’ve asked for an email address on an online form, you actually get one? The second is how do you make sure your customers include a name and phone number when they contact you from your website? The answer lies in form validation, or checking a form’s data before it is submitted, and JavaScript is particularly useful for client-side validation.

In this tutorial, we will create an online contact form our visitors could use to send us an email message. To guarantee they include their name, email address and a short message when they submit the form, we will use a simple JavaScript function to illustrate how validation works. By checking our form data before we submit the form, we will eliminate the potential of receiving a blank email from JavaScript enabled users.

Software Used: TextMate

Additional Files: form_validation.zip

Click the image to launch the tutorial.

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 7 )

  1. Legacy User September 20, 2007 Reply

    Hey, I thought it was an informative tutorial and quite important, too, for web developers to include form validation. However, as you mentioned, with client side validation if the client does not have JavaScript then it would not work. In that case won't server side be a better choice? Maybe you could have a tutorial with that as well.

    — *Andre Brathwaite*

  2. Legacy User September 22, 2007 Reply

    Great tutorial! Thank you.

    How can we set up a validation so that the user has to confirm their email address by clicking on a link sent to the address they entered?

    I find that some customers put in fake email addresses just to get through to the next section of our website.

    I would like to have them validate their email address by email confirmation.

    Any advice?

    — *Paul E.*

  3. Legacy User September 23, 2007 Reply

    Andre –
    Thanks for the suggestion. In an ideal application, there would be both JavaScript validation on the client side (to catch bad entries right away and save a request to the server) and also some sort of server-side validation as well to ensure that the data being put into a database is correct. In order to do a server-side tutorial, it would have to be in a specific scripting language such as PHP, Rails, ASP, etc… I'm interested to hear what people think would be the most useful.

    Paul-
    To pull off what you are looking to do, you will need to have a system where the user would create an account (for example) by entering their email address. The server would then send that email address an email with a link to verify their address. Once they click that link, another script on the server would verify the account and continue the process. Again, this is all done with a server-side scripting language such as PHP, Ruby, ASP…

    — *Brian Getting*

  4. Legacy User October 5, 2007 Reply

    Having a problem getting my PHP form to submit. The script correctly validates the form fields to be sure each is filled in, but when I click on "Submit Form" nothing happens. The data is not sent to the SQL database.

    Any help or guidance you can give would be greatly appreciated.

    The Form:

    EBS PowerPad

    Mass Scanner Request Form

    Please complete the form below to request mass scanners for your station. All form fields must be completed in order to process your request.

     

    Name:

    Employee
    Number:

    Email:

    Station ID::

    Quantity of Scanners

    Request Justification:

    Submit Form

     

    The scripts.js file:

    function validate() {
    var name = document.getElementById('name');
    var empNum = document.getElementById('empNum');
    var email = document.getElementById('email');
    var stationID = document.getElementById('stationID');
    var request = document.getElementById('request');
    var comment = document.getElementById('comment');
    var error = '';

    if (name.value == '') {
    error += "Please enter your name.
    ";
    }
    if (empNum.value == '') {
    error += "Please enter your employee number.
    ";
    }
    if (email.value == '') {
    error += "Please enter an email address.
    ";
    }
    if (stationID.value == '') {
    error += "Please enter a station ID.";
    }
    if (request.value == '') {
    error += "Please enter the quantity of scanners.
    ";
    }
    if (comment.value == '') {
    error += "Please enter a quantity justification.
    ";
    }

    if (error != '') {
    alert(error);
    return false;
    } else {
    return true;
    }

    }

    — *David Moore*

  5. Legacy User April 17, 2008 Reply

    Great tutorial! Thank you. http://createunity.biz – business. all about business

    — *toxa*

  6. Legacy User April 21, 2008 Reply

    This script seems to work fine when used with an action address being sent to the server, however when I try to implement it using a "mailto: xxx" as my action then the form is submitted without any validation being made. Please give me examples or samples of how to use this correctly with Mailto Forms.

    — *Ralph Cassidy*

  7. Legacy User May 12, 2008 Reply

    Thanks Brian I am a beginner and I find your article quite useful, as I am working on validation at the moment.

    — *paulette miller*