JavaScript Email Address Validation

JavaScript makes it easy to validate form fields such as the commonly used email address field.  For web designers trying to validate the email field, this simple script provided by Smart Webby works great.  I thought I'd pass this along, it can be used to easily validate the email field of your contact, comment, etc. forms.  Please let me know what you think or if you're having trouble.

To begin, here's a working example.  Enter an invalid email address and click submit.  You should see a JavaScript alert (the message can be customized).

Demonstration:

 

How to implement in 2 steps:

First Step: Copy and paste this validation JavaScript into the HTML header tags of your page.

<script language = "Javascript">
/**
 * DHTML email validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
 */

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>

Step Two: Copy and paste the form code or modify yours to work with the code (or visa versa).

<form name="frmSample" method="post" action="#" onSubmit="return ValidateForm()">
                <p>Enter an Email Address : 
                  <input type="text" name="txtEmail">
                </p>
                <p> 
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>

Please note: All credit goes to www.smartwebby.com for writing this script. You can view the article here. You can also find a description of the code at that url.

Related posts:

1. Use JavaScript to Print an Image Using JavaScript you can have images print when clicked on. What this script will do for you is open whatever image is specified in the JavaScript in a new browser window along with the Print options window. This method is useful if you are looking for a way to have either a print button for [...]...
2. GoDaddy WordPress Sites Infected by HolasionWeb Malicious Code Have you gotten calls from your clients hosted on GoDaddy about their WordPress site's being 'hacked'? Or perhaps this happened to you yourself. It seems there's a new report of thousands of WordPress sites being infected by malicious javascript inserted on their WordPress website. It's not everyday that WordPress gets 'hacked' by something/one.  Today one [...]...
3. WordPress Lavalamp Navigation Tutorial Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's [...]...
4. SharePoint Workflow: Remove the “?????” for blank values in email So you have emails being sent out using SharePoint workflow but the problem is the blank values return five question marks "?????" and this is not very appealing to the user. Perhaps you would like it to say something else instead that wouldn't confuse your recipients as much. Follow this tutorial to learn how to [...]...