Video Tutorial: Validating A Form With JavaScript
Useful for client-side validation
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.
Sponsored links
- Pod1 – Design, Ecommerce, Online Marketing
7 Comments
Legacy User says:
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
Legacy User says:
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.
Legacy User says:
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
Legacy User says:
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
Legacy User says:
Great tutorial! Thank you. http://createunity.biz - business. all about business
-- toxa
Legacy User says:
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
Legacy User says:
Thanks Brian I am a beginner and I find your article quite useful, as I am working on validation at the moment.
-- paulette miller
