Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Javascript E-mail Address Validation

In forms when using email ID fields it is a good idea to use client side validation along with your programming language validation. The following example shows how you can validate an email address for a form. The script is cross browser compatibe (works for all browsers).

Example

Example of email validation

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

JavaScript Code

function echeck(str) {

var at="@"
		var dot="."
		var lat=str.indexOf(at)
		var lstr=str.length
		var ldot=str.indexOf(dot)
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail ID")
		   return false
		}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail ID")
		   return false
		}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail ID")
		    return false
		}

if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail ID")
		    return false
		 }

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail ID")
		    return false
		 }

if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail ID")
		    return false
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail ID")
		    return false
		 }

return true					
	}

function ValidateForm(){
	var emailID=document.frmSample.txtEmail
	
	if ((emailID.value==null)||(emailID.value=="")){
		alert("Please Enter your Email ID")
		emailID.focus()
		return false
	}
	if (echeck(emailID.value)==false){
		emailID.value=""
		emailID.focus()
		return false
	}
	return true
 }
</script>

HTML Code

Explanation of the Code

The JavaScript has two functions:

Function echeck is used to verify if the given value is a possible valid email address. This function thus simply makes sure the email address has one (@), atleast one (.). It also makes sure that there are no spaces, extra '@'s or a (.) just before or after the @. It also makes sure that there is atleast one (.) after the @.
Function ValidateForm is used to make sure that the email field is not blank and that it is a valid email address on form submission.