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.
Thursday, September 20, 2007 · 11:47 AM
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
Saturday, September 22, 2007 · 03:21 AM
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.
Sunday, September 23, 2007 · 09:32 PM
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
Friday, October 05, 2007 · 12:35 PM
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
Connect with us