Case study- client side email validation

A few months ago, we were working on upgrading the user account creation screen.  It was mostly cosmetic- the original version was in a bit of an odd order, and didn’t really have any logical flow to it.  So, we broke it into a few relevant headlined sections and added some real time updating sections.  Initially, they would display instructions and tips on filling in the fields.  As the admin created the user, those instructions would change to colored feedback- green for approved content, red for possible errors.

So we ended up doing a Google search for ‘javascript client side email validation regex’.  I naively thought it would be an easy solution.  I found a rabbit hole that rivaled the last time I ventured onto YouTube and started watching movie trailers.

I discovered that there’s an official standard: RFC 2822, and it has an official regex:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

That’s a whole lot of regex, so I kept searching for something simple.  I can put together a simple regex check, but absolutely did not trust myself to write anything this complex.  We found one that seemed good, did a bunch of tests, and implemented it.  The upgrades seemed to go great- creating a user was easier than ever!

A few weeks later, I noticed an odd issue.  I was typing one of my email addresses into a new user account to test a new site we set up.  I know my own email very well, so was typing like the wind.  I got about 10 or 12 characters in when Firefox completely froze.  It’s not the first time FF did this to me- it actually does the same thing fairly frequently when I’m trying to check my Gmail inbox, so I wasn’t too worried.

But then, a client noticed the same thing.  Long email address, typing quickly, crashed browser.  Time to investigate.

Turns out, it was a repeatable bug (shocking!).  There was a point in the regex where the length met the speed of the typist and resulted in an overload.  Not something I would have anticipated, but definitely an issue I’ll check from now on.  We simplified the regex and added a conditional to only start checking on keyup after the address is at least 5 characters long- works great.

I know the counter argument- I’ve read all the Stack Overflow posts.  Validating email via JS is a fool’s errand.  I get it.  But we’re not using this as a zero-sum check.  The simple regex check we’re using will correctly validate on roughly 99% of legitimate email addresses.  But if the user does have a very odd address, it won’t be rejected.  The admin can still save the user without trouble- they’ll just see a warning that there may be something wrong with it.  The likelihood that the admin missed a ‘.’ character is much higher than the user having a crazy email address.  Seemed like a good trade off!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s