|
Validating Email Addresses - Strategies And Code
By Stefan Mischook
Expert Author
Article Date: 2004-04-29
First it's a day, then a week, and all of a sudden two weeks has gone by and I realize that I haven't sent out a newsletter! A feeling of shame and self-loathing takes over ... forced to my desk, the writing begins. :)
I thought it would be good this week to get back down to some basic code. I'm not going to explain programming fundamentals; instead I am going to give you a practical example you can use in your own web pages... even if you don't know anything about programming!
Validating email addresses
Collecting email addresses on websites (with HTML forms) is a common need. In this article I provide an easy to use method (complete with code) to help you collect proper email addresses.
HTML Forms
HTML forms are made up of components that can be filled in allowing you to gather information from people visiting your web site. I am guessing that you all have seen and used forms and you know what I am talking about, so lets move on.
You collect email addresses using a simple HTML text box. This is the HTML code that creates a text box:
<input name="email" type="text" id="email" value="your email address">
Typically you would present the visitor to your web site a text box like the one above, and if the person feels like it, they will enter in their email address. There is one problem though ... people can make mistakes.
With the Killersites newsletter, I get people entering in all kinds of things that are not email addresses. To solve this problem, I have found that the best solution combines proofing what the user has entered and checking for the characters (@ and a period) that must be part of any email address.
Proofing peoples address
People are now wondering how you could proofread what someone has filled in an HTML form? The simple solution is to have them proof it themselves - with a little help from JavaScript. All you have to do is create two text boxes, instruct people to enter their email address in both boxes and then have JavaScript check that the text entered in each box matches. It isn't perfect, but it does catch many errors and helps to keep your records clean of bad email addresses.
The code is simple, lets start with the HTML form:
<form method=''post'' action=''myScript.php'' onSubmit="return checkEmail(this);"/>
<input name="email" type="text" id="email" value="your email address" onFocus="this.select()">
<input name="email2" type="text" id="email2" value="confirm your address" onFocus="this.select()">
<input name="Submit" type="submit" value="Join">
</form>
This form sends (in other words submits) the information that someone has entered to a script sitting on your server. In the above example, it is sending the information to the PHP page: myScript.php. The key thing about this form is this line:
onSubmit="return checkEmail(this);''
This line is telling the browser to call (activate) the function called 'checkEmail' when someone tries to submit the form - forms are submitted when the user clicks on the 'submit' button.
Here comes the most complicated part of this tutorial, so hold on to your hats:
In the above line of code, we use a special reserved word in JavaScript that basically tells the browser to listen for a message from the function 'checkMail'. This message is either 'true' or 'false'. Now this is getting confusing for many ... let me try to explain without going into all the nerd programming theory.
In a nutshell: the function (checkEmail) can cancel the form from being submitted by sending a message to the browser. The function checks to see if the person entered in a proper email address and that the email addresses in both text boxes match; if both are true, the function tells the browser that it can send the information to the server by delivering the message: 'true'. If on the other hand one of those two conditions is not true, (the email addresses don't match or one of the required characters is missing) the function tells the browser to not submit the form by delivering the message: 'false'.
The best way to learn anything is to actually do it, take the form code above and cut and paste in into an HTML page. The next thing you need to do it cut and paste this JavaScript code into the same HTML page in between the and </head> tags:
<script language="javascript">
function checkEmail(){
var email = document.getElementById("email");
var email2 = document.getElementById("email2");
if(email.value.indexOf("@") != "-1" && email.value.indexOf(".") != "-1")
{
if(email.value != email2.value) {
alert("Your email address does not match: "+ email.value);
return false;
}
else {
return true;
}
}
else
{
alert("Please be sure to enter in a proper email address.");
return false;
}
}
</script>
I'm not going to go into detail explaining the code, all you need to know to make this work, is that the text boxes used to collect the email addresses, have to be given the id 'email' and 'email2'respectively. Look at the code in the HTML form and you see that I gave each text box an id. For example:
id="email"
The complete tag looks like this:
<input name="email" type="text" id="email" value="your email address" onFocus="this.select()">
Some of you may have noticed something extra in the text field tag:
onFocus="this.select()"
This is just a little handy JavaScript that causes the browser to automatically select all the text (in the text box) when someone clicks inside the text box with his or her mouse. Just try it and to see how it works. It's nothing special, just something that makes the form a little easier to use.
The strategy behind the script
Without going into details about the actual programming, I want to make two points about the thinking behind this strategy:
People are much less likely to type in two bad email addresses than just one bad email address. Since the script forces them to enter in the email address twice, we are much less likely to have a genuine user error. If the guy wants to enter in a phony address, there is nothing you can really do about, this code and strategy is meant to prevent unintentional errors only.
In the function, I check to see if the characters '@' and '.' (period) are present in the email address entered. I don't check for extensions (.com, .org, .net etc) anymore because there are new ones coming out all the time; if you checked for extensions in your code, you would have to constantly update the function to check for the new extensions and that would be a pain for no real gain.
I hope this article / tutorial wasn't too complex for some of you. My intention was not to teach you JavaScript or programming (I already have articles on that), rather I wanted to give you an easy to use tool and strategy to validate email addresses.
You should also remember that for any critical data, you shouldn't count on JavaScript to validate things. JavaScript can be turned off (about 10% of the people do turn it off!) and thus can easily be bypassed.
About the Author:
Stefan Mischook has been developing web sites and web applications since 1994. Stefan has spent the last several years working on dozens of web and multimedia projects for small business and large pharmaceutical and banking organizations. Along with contract work, Stefan now runs the popular web sites www.killersites.com and www.how-to-build-websites.com writing concise to the point articles with the aim of teaching people ‘real-world’ web design skills.
|
|
