jQuery Email Validation without a Plugin

 

For updated code check out the fiddle on jsFiddle; Validate Email using jQuery

 

Validating Email using jQuery

More and more I am finding out that I use jQuery predominately for my projects. Now I keep a local repository of code snippets, but I as I have said in the past I am trying to move all my local code to the “cloud”. I am storing all my code on my website so that I will have even easier access than before and to get traffic to my site.

:)

jQuery Function to Validate Email

I really don’t like to use plugins, especially when my form only has one field that needs to be validated. I use this function and call it whenever I need to validate an email form field.

function validateEmail(email) {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if( !emailReg.test( email ) ) {
return false;
} else {
return true;
}
}

Pretty basic here, but I always forget the Regex string. Now I can just copy the snippet from my site!

Looking for help

Does anyone have better code for jquery email validation? I am always trying to get my code to be more secure and more efficient and any help in greatly appreciated.

Comments

  1. Aaron Richards says

    just thought that i would mention that this doesnt require jQuery, it would work with anything that can pass the email to the function

  2. Nik Sumeiko says

    Your code could be even simplified:

    function validateEmail($email) { var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/; return emailReg.test( $email );}

    You don’t need another IF statement to check if ‘test’ function returns falsy or trusty value.

  3. says

    sorry I took so long to answer you. I just moved to a new place. I have created a jsFiddle for you to show you how this works. Check it out here; http://jsfiddle.net/thejimgaudet/kmvgw/

    Basically, the $email should really be just email (do not use the dollar signs) and in order to test an email address you will need to pass it using an input box or some other means. In the jsFiddle I show you how to use an an HTML5 input email field and a submit button.

    I hope that helps, if so just give me a good vote up top :)

  4. Billynair says

     $email is a variable YOU set. most likely coming from an input field the user fills in

  5. Slick Rick says

    Thanks for this awesome little code snippet!

    Ashwini – it is the email variable that you call from your HTML. For instance, if you have a form with you would replace email (and $email) in the above code with either ‘.email’ for class or ‘#email’ for id.

  6. Raziel says

    Your function is cool, though using jQuery can make some things easier I prefer to make basic things the way I use to do them with pure Javascript.  I always use the electronic mail address regex from this web site: 
    http://www.regular-expressions.info/

    It’s really nice to see that there’s still some people around who likes and knows how to use pure javascript, cause where I live, a lot of new programmers and kinda old too, think that jQuery is a new programming languange… xD

  7. artemisaix says

    It doesn work to me.. example..:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Documento sin título</title>
     <script type=”text/javascript”>
     
    $(document).ready(function(){
    function validateEmail(email) {
        var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
        return emailReg.test( $email );
    }
    </script>
    </head>
    <body>
    Validar email:
    <input name=”email” type=”text” id=”email” value=”@” maxlength=”200″ onblur=”validateEmail(this.value);” />
    </body>
    </html>

    Show me this errors:
    SyntaxError: invalid range in character class
    ReferenceError: validateEmail is not defined

Leave a Reply

Your email address will not be published.