The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

JavaScript Tutorial - Validate Email Address

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

This Tutorial ...

27-Oct-2014: The script on this page has been updated to deal with cross-browser issues.

Learn how to validate a users email address using JavaScript. This tutorial displays a series of preset demonstrations that show different email address errors being trapped by the script. Example Markup and script are provided for you to copy/paste into your HTML editor for inclusion on a web page. If you are intending to include a 'Contact Us' page on your Website then you will need to create a more comprehensive FORM that communicates with a CGI program located on your site's Web server. The CGI program is likely to be 'FormMail' from Matt's Script Archive, which acts as a FORM to email gateway and is pre-installed by most Web Hosting providers.

Understanding Validation

Validating an email address using JavaScript is browser-side function and you should be aware of the limitations of browser-side validation. JavaScript can check the syntax of an email address to see if the address could be correct but it cannot check the address itself to see if it actually exists. This can only be done by a server-side program (e.g. a CGI/Perl script on a Web server) sending a request to an Internet Mail Server, to check if the email address exists and if a connection would be accepted by the Mail Server. However, browser-side validation can be very useful when used to filter out the more obvious mistakes in the syntax of an email address and if you are collecting email addresses for a database then browser-side validation is essential.

We have provided a series of preset demonstrations, a users test validation form, the corresponding HTML form input script and a JavaScript script that contains our seven validation routines. These scripts are cross browser compatible and should work in any modern browser that has JavaScript enabled. In educational terms, this tutorial is also an exceptionally good way to start understanding the operation of advanced JavaScript Forms and we commend the tutorial to you on this basis alone.

Preset Demonstrations

We start by displaying a series of preset E-Mail Address, validation demonstrations, some using E-Mail addresses that are valid whilst others use E-Mail addresses that are invalid. Check them our for yourself.

There is one interesting point of note in these demonstrations. Most Web users believe that you can only use a Domain Name (e.g. web-wise-wizard.com) in an E-Mail Address and that you cannot use the corresponding IP Number of the Domain, or more typically of the Domain's Mail Server (e.g. 65.108.41.13). This belief is incorrect and the Internet Mail protocol does allow you to use an IP Number in an E-Mail Address. When using an IP Number the dotted decimal notation number must be enclosed in square brackets (e.g. user@[65.108.41.13]).

feel free to override these preset values and test your own error inputs ...

Preset Demo 1
 
Preset Demo 2
 
Preset Demo 3
 
Preset Demo 4
 
Preset Demo 5
 
Preset Demo 6
 
Preset Demo 7
 
Preset Demo 8
 
 

Users Test Validation Form

we have provided this further simplified test so that you can download the Markup to use yourself ...

Use this form to check any valid or invalid email addresses you would like to test the validation script with. It is worth noting that our script only does seven validation checks whereas there are possibly dozens of other validation checks that could be done. At best, you can only hope to filter the more obvious errors when using browser-side email Address validation. If you consider that there are omissions in our validation routines then you are free to add more checks to the script yourself and this may be a very good thing to do educationally, especially if you are learning JavaScript.

This form is for demonstration purposes and it allows the user to validate their own or bogus email addresses. Try this options for yourself and you should also try entering a valid E-Mail Address and then submitting the Form. This should cause a JavaScript Alert to be displayed, informing you that the 'E-Mail Address Validates OK'. This feature will be discussed in greater depth in the next section.

Validate Email Address

Enter An Email Address
 
 

HTML Form Input Script

The Textarea box below contains a simplified version of the HTML script from the Users Test Validation Form displayed above. You can easily incorporate this script into your own HTML forms or alternatively, you can expand this script for your own purposes. You should note that the onsubmit attribute in the FORM tag is required so that the E-Mail Address can be automatically validated if the user clicks the Submit button or hits the Return key on their keyboard, which has the effect of submitting the Form if there is only one text input field.

Remember that this is a demonstration Form and you should note that the action attribute in the FORM tag displays a JavaScript Alert telling you that the E-Mail Address Validates OK!. This particular message will only ever be displayed when a user Submits the Form, if the input has passed all the validation checks and the validation function has returned a boolean true value. If the validation function returns a boolean false value then this message will not be displayed and it would be time well spent to carefully study and understand this advanced JavaScript feature. In a normal Form script the action attribute would typically point to a CGI program on a web server.

paste this script into the BODY section of your page (style info has been deliberately omitted) ...

 
 

JavaScript Validation Routines

The following JavaScript script should be pasted into a JavaScript section on your web page and if you are not sure how to do this then you can read the section at the bottom of the page, under the heading 'New To JavaScript?  If you have done everything correctly then the script should automatically connect up to the 'HTML Form Input Script' above. Once you have the two scripts working correctly on your own web page you can then start to study the interaction between the scripts and start tweaking the two scripts to suit your own requirements.

paste this script into a JavaScript section on your page ...

 
 

New To JavaScript?

If you are new to JavaScript then you might like to study the following script. It shows you how to setup a JavaScript section in the HEAD section of your HTML page. You can use it in conjunction with the scripts displayed above and it is in my opinion the best method of creating a JavaScript section for most purposes. Any code placed in this JavaScript section that is not inside a JavaScript function will be executed immediately, when the page is first loaded. Code inside JavaScript functions will only be executed when the function is called.

example JavaScript section ...

 
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Validate Email Address Learn how to validate an email address using JavaScript. This tutorial displays preset demonstrations that show different errors being trapped by the script. Example Markup and script are provided.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Validate Email Address Links
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England