How to check something isn't an email address?

In web-development circles, it is a well-known fact that trying to validate an email using a regular expression is… complex.

The full set of modern email standards allows for such wonderful addresses as:

So determining whether or not your user has entered a valid email address becomes an ever-increasing challenge.

But what if you have the opposite issue? Suppose you have a form which takes something which mustn't be an email address?

For example - imagine you have a login form which requires a username. And yet your stupid users keep entering their email addresses instead! How can you quickly, cheaply, and simply detect email addresses?

Well, no matter whatever else is in an email address, there will always be an @ somewhere. The @ is necessary but not sufficient for an email address.

So you can use HTML5's pattern attribute.

Here it is in action:

<input type="text" 

That says "don't accept anything with the @ symbol in it".

We can take it a bit further and add some more attributes to help our users

<input type="text" 
      placeholder="Your username (which is NOT your email address)"
      title="Don't use your email address!!!!!"

Try it out!

As soon as you type an @ the form will go into an invalid state and can't be submitted. You won't be able to click the login button.

Should You Use This?

Well… perhaps in a pinch. The real solution is to be agnostic towards your users' choice of login. Some may prefer to use an email, some a username. Some may expect their username to start with an @. Be tolerant of their needs and desires.

Share this post on…

3 thoughts on “How to check something isn't an email address?”

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">