If you mention email validation, most developers only think about the technical aspect of it. What is a valid email? Basically, there are two ways of thinking about it: Regular expressions are enough or Regular expressions don’t cover 100% of the email standard. For that I can only say: yes, a regular expression does not work for your esoteric email addresses, but who cares? The w3c spec for <input type="email"> says this should be done with this regular expression:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

If your email address does not comply with that, you will have problems everywhere.

Now that we have this boring part of the discussion out of the way, let’s focus on the real problem.

I build tons of MVPs in my life, and most of the time we needed to add some form of email validation to the system. Either to comply with European regulations, and/or to verify a correct email address. A correct email address is especially important if you want to make sure that you can successfully convert someone to a user. You need that to send notifications, engage with them and finally turn them into a happy paying customer.

The first, and most important part, should be to check if this is really needed. Do you want to be allowed to send newsletters to the user? If yes, you need a double opt-in. If not, you could simply go ahead without this. Simply let everyone in, regardless of their email address. This has a gigantic upside: users can use your app super quick. And for some use cases, it’s more important to let users in quickly than to have a confirmed email address. The downside is, sadly, rather big. You are not allowed to send marketing emails, you will have some users who cannot log in because two weeks later they realize that they must have had a typo and their cookie expired and so much more.

After you decided you want a double-opt-in and verify the email address, you have to send out a confirmation email. You want this experience to be as smooth as possible. Having users open their email account, wait for an email to arrive, and then hopefully get them to click on the confirmation link, is a long process that can lose lots of potential customers when done wrong.

You need to make sure that all potential errors are addressed and can be fixed quickly by the user.

What could go wrong? Sadly, a lot. Your role is to make it simple for the user to resolve all problems. Let´s go through all the steps and see what can go wrong and how to fix the most common problems.

Step 1: Entering the email address

The most important part is to mark the input field as an email field. Most browsers will show the most recently used email addresses and help the user to fill in the field. This will remove 99% of all typos.

Step 2: Highlight possible typos

After we got rid of 99% of all typos, we still have to deal with the remaining 1%. We cannot do much about the stuff before the @, but we can help with the stuff after the @. There are libraries that can help you with that. They can suggest that gnail.com is probably a typo and the user meant gmail.com.

There are lots of libraries to do that, for example email-misspelled, truemail or valid_email2.

Offer a simple “Did you mean gmail.com?” button to the user that they can click to replace the typo.

Step 3: After sending the email

After the user submits the form, you send out an email and wait for the user to click on the link. In my experience, THIS is usually the page where users realize that they had a typo or used the wrong email address.

You need to make sure that the user can resolve this problem as quickly as possible. You should show the user a message to what address the email was sent to and that they should check their email account. If the user sees a problem, you should give them the option to change the address. You should not force the user to go back to the form and fill it out again. Simply give them the option to fix the email address right there.

Additionally, add a “resend email” button. This will help with cases where the user deletes the email accidentally or the email gets lost in the spam folder.

Step 4: After clicking the link

After the user clicks the link or enters the confirmation code, you should send the user to a page that enables them to use your product as fast as possible. Please don’t end on a page that simply says “Thanks for confirming your email address”. This is the first page ‘inside of the app’ for your customers. They should be greeted as such and have a clear path to using your product.

I hope this helps you to make your email validation process as smooth as possible. If you have any questions or suggestions, feel free to send me an email.