Showing posts with label Javascript to varify email address. Show all posts
Showing posts with label Javascript to varify email address. Show all posts

Sunday, 26 May 2013

Javascript to varify email address..



Javascript to varify email Address..



This script uses regular expressions to check that a form field contains a valid email address.

Add the following script in your page..


<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        var emailfilter = /^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
 
        function checkmail() {
            var emailIdToCheck = document.getElementById('myemail').value;
 
            if ((emailIdToCheck == null) || (emailIdToCheck == "")) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Please Enter your Email ID";
                document.getElementById('myemail').focus()
                return false
            }
 
            var returnval = emailfilter.test(emailIdToCheck);
            if (returnval == false) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : "+ emailIdToCheck + " is not valid email id.";  
            }
            else {
                document.getElementById('result').style.color = "green";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is valid email id.";
            }
            return false;
        }
    </script>
</head>
<body>
    <input name="myemail" id="myemail" type="text" style="width: 270px" />
    <input type="submit" onclick="javascript: return checkmail();" value="Submit" />
    <br/>
    <br/>
    <div id='result'></div>
 
</body>
</html>

The code above includes a sample form where this script validates the email field contained.

Output will be as following.


It will show required field message if email id field is blank.
Javascript to varify email Address



Following will be result if you enter valid Email Address in text box.
Javascript to varify email Address



Following will be result if you enter invalid Email Address in text box.
Javascript to varify email Address



Regular expression to validate email address belonging to some specific domains.

        var emailfilter = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;


Another way to check valid email address using javascript is to check following points only.

1. Check that email address has only one (@) and after the @ atleast one (.) and it is not at starting or ending position.
2. And there should not be any spaces, extra '@'s or a (.) just before or after the @..

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function checkmail() {
            var emailIdToCheck = document.getElementById('myemail').value;
 
            //To check if email id field is not blank.
            if ((emailIdToCheck == null) || (emailIdToCheck == "")) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Please Enter your Email ID";
                document.getElementById('myemail').focus();
                return false
            }
            var at = "@"
            var dot = "."
            var lat = emailIdToCheck.indexOf(at)
            var lstr = emailIdToCheck.length
            var ldot = emailIdToCheck.indexOf(dot)
            if (emailIdToCheck.indexOf(at) == -1) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false;
            }
 
            if (emailIdToCheck.indexOf(at) == -1 || emailIdToCheck.indexOf(at) == 0 || emailIdToCheck.indexOf(at) == lstr) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false
            }
 
            if (emailIdToCheck.indexOf(dot) == -1 || emailIdToCheck.indexOf(dot) == 0 || emailIdToCheck.indexOf(dot) == lstr) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false;
            }
 
            if (emailIdToCheck.indexOf(at, (lat + 1)) != -1) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false;
            }
 
            if (emailIdToCheck.substring(lat - 1, lat) == dot || emailIdToCheck.substring(lat + 1, lat + 2) == dot) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false;
            }
 
            if (emailIdToCheck.indexOf(dot, (lat + 2)) == -1 || emailIdToCheck.indexOf(" ") != -1) {
                document.getElementById('result').style.color = "red";
                document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is not valid email id.";
                return false;
            }
            document.getElementById('result').style.color = "green";
            document.getElementById('result').innerHTML = "Entered email id : " + emailIdToCheck + " is valid email id.";
            return false;
        }
    </script>
</head>
<body>
    <input name="myemail" id="myemail" type="text" style="width: 270px" />
    < input type="submit" onclick="javascript: return checkmail();" value="Submit" />
    <br/>
    <br/>
    <div id='result'></div>
 
</body>
</html>

Output will be same as described above for first method.