Oct
28th

Check Email Address with JavaScript and Regular Expressions

Thanks for stopping by my personal blog on Marketing Technology! Over 50,000 visitors a month find my content worth returning for, so don't forget to subscribe to the Marketing Technology Blog RSS feed or to the Marketing Technology Email to have new content sent directly to your inbox. You may also find my other business blog helpful, Social Media Domination.

A while ago I put up a Password Strength Checker using JavaScript and Regular Expressions. On that same note, you can also check the structure of an email address utilizing the same methodology:

If your form element has the id=emailaddress and you add a form onSubmit=”return checkEmail();”, this is a Javascript function that you can utilize to return an alert if the email address has a valid structure or not:

<script language="javascript">
function checkEmail() {
var email = document.getElementById(’emailaddress’);
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert(’Please provide a valid email address’);
email.focus
return false;
}
}
</script>

The function also returns the focus back to the emailaddress field!

You might also find these posts interesting:

RSS feed | Trackback URI

14 Comments »

2007-10-28 17:17:35

[...] Email Addresses - I don’t mind forms that make you fill out your email address twice to validate them, but the fact that they don’t tell you whether or not they match or are constructed appropriately is inexcusable. [...]
 
Comment by no imageAde (SezWho)
2007-10-28 20:59:55

For forms with multiple email addresses, it would be good to do class=”emailaddress”. If you have the prototype.js library (http://www.prototypejs.org) included on the page you can do something like this:

var valid = true;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$$(’.emailaddress’).each( function(email) {
if (!filter.test(email.value)) {
alert(’Please provide a valid email address’);
email.focus;
valid = false;
}
});
return valid;

Rate this:
2.9
Comment by no imageDouglas Karr (SezWho)
2007-10-29 07:40:02

Thanks Ade! I’m going to need to learn some more about classes and JavaScript!
Rate this:
2.9
 
Comment by no imageSterling Camden (SezWho)
2007-10-29 16:58:18

Doug’s original example was cool, but this one is freezing! I did not know that you could process elements having a class this manner, and the functional syntax is sweet.
Rate this:
2.9
Comment by no imageDouglas Karr (SezWho)
2007-10-29 18:58:57

Ade and his team are amazing!
Rate this:
2.9
 
 
 
Comment by no imageTony Chung (SezWho)
2007-10-29 07:14:46

Nice, I can always count on you for some wicked cool scripts! :)
Rate this:
3.2 (3 people)
Comment by no imageDouglas Karr (SezWho)
2007-10-29 07:40:25

Thanks Tony!
Rate this:
2.9
 
 
2007-11-01 15:00:15

[...] posted a tip on checking email addresses in Javascript using regular expressions, and then Ade improved on it in a comment showcasing Prototype’s $$ [...]
 
Comment by no imageReg Braithwaite (SezWho)
2007-11-01 22:37:41

I like the idea, but I would be hesitant to adopt this particular regular expression without description of which legal email addresses it does not accept and which illegal addresses it permits.

For an example of a regular expression that does a decent job alongside an explanation of which cases it does not cover, see this:

http://www.regular-expressions.info/email.html

My personal preference is to cover most of the simple cases and issue a warning for everything else rather than rejecting it. If Bob really want sto submit bob@com.museum rather than bob@museum.com, why not let him?

Rate this:
3.0
Comment by no imageDouglas Karr (SezWho)
2007-11-02 10:23:04

Hi Reg,

You can test out the Regex utilizing an Online Regex Tester.

Also, there’s definitely much more that can be done if you want to ensure an email address is valid in accordance with the RFC.

There are a few reasons not to allow someone to enter an invalid email address:
1. They will get annoyed at you when the email they expected doesn’t get through - regardless of whether or not it was your fault the address was entered incorrectly.
2. If com.museum was a valid domain and, let’s say, Yahoo! operated it - any email address that bounced would have a negative impact on your company’s reputation for email delivery. This could lead to all of your company’s email being blocked.
3. If your email service provider allowed you to enter bob@com.museum, you’d also pay for each email sent to that email address until they unsubscribed that address due to bounces. I would steer clear of any ESP that would allow an invalid email address like that - they’re just taking your money!

Thanks for stopping by!
Doug

Rate this:
3.1 (1 person)
 
 
Comment by no imageAndroid (SezWho)
2008-07-24 06:32:50

Perfect, just what I needed!
Rate this:
2.5
 
Comment by no imagegemp (SezWho)
2008-08-07 10:25:02

There’s much simpler way to write the expression:
var regex = /^[a-z0-9\._-]+@([a-z0-9_-]+\.)+[a-z]{2,6}$/i;
- With the final modifier /i there’s no need to indicate the upper case range.
- I don’t know of any TLD with numbers in it.
On a side note, I do allow TLD with up to 6 chars; new ones arrive regularly and you never know (well, somme future ones may even have numbers in it, I know).
Rate this:
2.8 (1 person)
 
Comment by no imageSzubu (SezWho)
2008-10-05 02:10:12

Hi there,

I am tring to use this in an existing form in real-time, but this doesnt appear to be validating in realtime like your password strength checker…

Or, am i just that clueless, and it aint workin for me?

Rate this:
2.5
 
Comment by no imageSzubu - LorenB (SezWho)
2008-10-05 02:16:40

btw, I really like what you have going on here, your tutorials are very simple, I will definately be bookmarking this one….
Rate this:
2.5
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

My Comment Policy: I moderate comments. Please be patient:

  • Spam will happily be destroyed.
  • Use your real name, not some keywords. Otherwise it will be destroyed.
  • Mean comments aren't necessary. If I don't post them I will reply personally to let you know why.
  • Lewd comments will be edited, I don't want my readers leaving because of offensive content.
Great debate, criticism and colorful commentary is always appreciated and approved!