.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Code Snippets >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

Validate email address using JQuery code

Posted By:JQuery Developer       Posted Date: May 22, 2013    Points: 40    Category: JQuery    URL: http://www.dotnetspark.com  

This code example will validate Email Address using JQuery in a web form using regular expression.
 

One of the very important validation is web form is email validation. Almost all the registration for has email field and that need to be validated on submit of the form. There are some JQuery validation plug in available which we will explore in another article.

Lets see the how to validate EMail textbox using JQuery. In this code sample we will validate email against regular expression.

NOTE: No regular expression for email gives you the bullet proof result. however this will validate almost.

In below code I have a textbox and Input button lets see the html code for those two

<input id="txtEMail" type="text" name="name" value=" " />

<input id="myButton" type="button" name="name" value=" Click To Test Email Input" />

Now I have a javascript method which will validate email and return value in boolean

Method to Validate Email

function ValidateEmail(email) {
    // Below is your regular expression you can change it if you need 
    var pattern = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);

    return pattern.test(email);
};

Below code is used to bind click event on document load and do the rest of your logic

$(document).ready(function () {
    $('#myButton').click(function () {
        // Get the value from textbox and use trim() to remove unnecessary space and pass textbox value to ValidateEmail() method
        if (ValidateEmail($('#txtEMail').val().trim())) {
            //your custom logic goes here if its valid email              
        }
        else {
            // Email not validated against regular expression hence display message
            alert("Please enter a valid email id");
        }
    });
});

Click here for live demo

 

Full HTML and JQuery code to validate email

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Page Title</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#myButton').click(function () {
            // Get the value from textbox and use trim() to remove unneccery space and pass textbox value to ValidateEmail() method
            if (ValidateEmail($('#txtEMail').val().trim())) {
                //your custom logic goes here if its valid email              
            }
            else {
                // Email not validated against regular expression hence display message
                alert("Please enter a valid email id");
            }
        });
    });

    function ValidateEmail(email) {
        // Below is your regular expression you can change it if you need 
        var pattern = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);

        return pattern.test(email);
    };
</script>
</head>
<body>
<input id="txtEMail" type="text" name="name" value=" " />

<input id="myButton" type="button" name="name" value=" Click To Test Email Input" />
</body>
</html>

 

Happy Coding


     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend