Javascript Email Validation

• Email Validation Tutorial
  • Email Validation

    JavaScript for Email 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. This javascript validation code is cross browser compatible (works for all browsers).

    Email Validation Example

    Example of email validation

    
    

    Enter an Email Address :
    
    

    View Explanation of the Code

    Cut and Paste Code

    Cut 'n' paste code for the above Example

    JavaScript Code

    <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>

    
    HTML Code

    <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>

    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 simply verifies the following:
    1. It makes sure the email address has only one (@) and that it is not at the end or beginning of the email address.
    2. It makes sure the email address has atleast one (.) after the @.
    3. 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
       
       
    • 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.

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!