JavaScript Email Address Validation

Validating email addresses fully in JavaScript is not possible. The only way to tell for certain that an email address is valid is to send an email to that address and have the owner provide a response. This can only be done by providing a special link in the email sent for them to click on that will run server side processing that flags their address as valid. Even if you take a step back and consider whether the email address matches the specifications for a potentially valid email address, you will still need to repeat this test on the server because, as with all validations, you can't rely on your visitors having JavaScript enabled in order to ensure that the validation runs.

What this means is that any validation that you perform via JavaScript to validate email addresses can get away with only checking for the most obvious errors since any of the more obscure errors will still be picked up on the server and it will be no more inconvenient for everyone when an obscure error is detected than it is for all errors for those of your visitors without JavaScript.

In fact most web sites compromise on a rather simplified email validation that not only rejects all the common errors that could be made in email addresses but which also rejects a large range of valid email addresses. The only reason that they can get away with such a validation is that most email addresses that people use fall within the small subset of potentially valid addresses that these email validation routines consider to be valid. For example my simple email address validation routine performs a series of simple validations on email addresses that any address containing a quoted value before the @ or an IP address after the @ will fail (but very few people use those types of address). It also contains a specific list of top level domains so that it would need to be updated if new top level domains are introduced (as has in fact happened since I wrote that version back in 2003). That form of step by step validation does have the advantage of being able to produce a range of error messages to be able to tell the person why their email address is considered to be invalid.

A more common approach to email validation is to use a regular expression. This reduces a long series of tests into a single statement but loses the ability to advise just what part of the pattern wasn't matched. The following regular expression is approximately equivalent of my prior function (you need to put it all on one line in order to use it):

validateEmail(e) {return !e.search(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/);}

To be a bit more flexible you could remove the top level domain test and simply test for it having a length between two and six so as to allow for the more recently introduced .travel domain and any other new domains. I have seen many such email validations that test for between two and four characters in the top level domain and ignore that the .museum domain has existed for well over a decade.

One of the disadvantages of any simplified email validation like this is that as well as rejecting most errors it also has the potential to reject a perfectly valid email address. If you want to be certain that any valid email address no matter how unusual it might look actually passes validation then you have two choices. Either you can reduce the amount of validation that you perform in JavaScript and rely on the server validation to detct more of the errors - for example by simply testing that the email address contain an @ character - or you can construct a much longer validation that actually tests the address in accordance with the actual rules for what is valid in an email address. The email validation function below tests both portions of the email address to ensure that they fall within the maximum lengths that those portions of the address are allowed to have and also tests the entire address against a regular expression that ensures that any potentially valid email address will pass whilestill rejecting most invalid combinations. As you can see this requires a rather long regular expression to test the address. (Note that with both the regular expressions shown on this page I have relied on the fact that the search returns -1 if no match is found and returns the position within the string where the start of the matching text occurs when a match is found. Since we are matching the entire string this must always be 0. Since 0 converts to false when treated as a boolean and -1 converts to true, we can use the ! operator to convert the value returned into true when the string matches and false when it doesn't match).

JavaScript

Note that the one thing that many web sites do that is completely pointless when it comes to email address validation is asking your visitor to enter their email address twice. All you are doing is forcing them to paste the address into two fields instead of one. If the value they pasted in the first field was wrong then pasting the same wrong value in the second field will not suddenly make it valid.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate