JavaScript to validate email address using a regex

Sam Deering
Tweet

This is a code snippet for basic JavaScript to validate email address using a regular expression. This is building on my previous post on how to use regular expressions with jQuery. You can also load the code in jsfiddle below.

Update 12/05/13: Separated into versions for testing.

Version 1

var $email = $('form input[name="email'); //change form to id or containment selector
var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(
".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA
-Z-0-9]+.)+[a-zA-Z]{2,}))$/igm;
if ($email.val() == '' || !re.test($email.val()))
{
    alert('Please enter a valid email address.');
    return false;
}

Load code in jsfiddle

Version 2

var $email = $('form input[name="email'); //change form to id or containment selector
var re = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/igm;
if ($email.val() == '' || !re.test($email.val()))
{
    alert('Please enter a valid email address.');
    return false;
}

Load code in jsfiddle

Versions

//reported to validate incorrectly: t123@.co.in as true
/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm

//reported to validate incorrectly: andre@uol.com@ as true
/[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/igm

//current version
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(
".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA
-Z-0-9]+.)+[a-zA-Z]{2,}))$/

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Teena

    @Sam : there is an error in this regex. The regex “/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm” validates email address t123@.co.in as a valid email id which is not true.

    If we use “/[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/igm” instead of the regex used by you, it will validate the email t123@.co.in as an invalid email address

    • http://jquery4u.com/ jQuery4u

      Hi Teena, might be a stupid question but why is t123@.co.in an invalid email address? Is .co.in a valid domain name for companies in India?
      Sam

  • http://twitter.com/alfontenelle André Fontenelle

    There is another error. Thats isn’t a valid email – andre@uol.com@ and passed true.

    • http://jquery4u.com/ jQuery4u

      Hi Andre, I’ve updated the code try version 1 above.

  • Ritz

    Hi Sam, I am new in jquery can u please tell me why we using re.test in this statement if ($email.val() == ” || !re.test($email.val()))

    • http://jquery4u.com/ jQuery4u

      Hi Ritz, the variable re stores our regular expression which matches valid email addresses. The JavaScript test() function can be applied to the regular expression passing the email address which is currently in the email field in our form. If the email is valid the test() function will return true so in the statement we are checking if the email value is present OR if the test returns false.

  • Doug

    Sam, thanks for the info. As a suggestion, it’s not too clear which of the three versions has the correct regex pattern. I’m assuming the last one from looking at the other comments.

  • Pingback: Javascript Email Regex | My Dev Note

  • Carol Bauer

    Sorry for the ignorance, but I don’t know where to add this code. is it in the functions.php? Head? Inside the form code? it’s not very clear…

  • mikafabz

    Great… Thanks for that!