Tutorial

Reduce Misspelled Email Addresses in Your Vue.js App with mailcheck.js

Published on February 2, 2018
Default avatar

By Derick Sozo

Reduce Misspelled Email Addresses in Your Vue.js App with mailcheck.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Entering and capturing email addresses is something that every single web app out there has to take care of. Capturing the right email on the sign-up form, the login form, and even using it as a confirmation string when performing important actions in the app. So a user misspelling their own email address can have big consequences. It happens more often than you think. Luckily, there’s a great library out there that can help in those scenarios called mailcheck.js.

Mailcheck is one of those small client-side libraries that does one thing well. It checks if the spelling of the domain for an email is misspelled and how closely it matches up with a known domain like gmail.com, yahoo.com, or your good ol’ pal aol.com. It then suggests the closest match.

Installation

Mailcheck should be installed from NPM:

  1. npm install mailcheck -—save

Setting up Your Form and Handling Email Errors on Blur

My suggestion is to put a blur event on the email field to check after a user is done typing for a good user experience and to give feedback immediately.

Form.js
<template>
  <form>
    <div class='form--inputContainer is-field-withEmailSuggestion'>
      <input v-model="email" @blur="verifyEmail" placeholder="Email address" type='email'>
        <span v-if="mailCheckedEmail" class='form--notice form--suggestEmail'>
          Did you mean <span>{{ mailCheckedEmail }}</span>?
        </span>
    </div>
  </form>
</template>

<script>
export default {

  data: {
    email: "",
    mailCheckedEmail: undefined
  },

  methods: {
    verifyEmail: function () {

      let self = this;

      Mailcheck.run({
        email: self.email,
        suggested: function (suggestion) {
          self.mailCheckedEmail = suggestion.full;
        },
        empty: function () { // nothing wrong with the email }
      });

    }
  }
}
</script>

Now when the user is done typing-in their email address the bottom span should populate if there’s an error. Mailcheck also provides an empty callback function if there’s nothing wrong with the email.

Replacing the Misspelled Email with the Mail-Checked Email

If there is an error with the user’s email Mailcheck will give you the correct one. You can then go in and set up a click event on the corrected email address to quickly replace the old one with the new one in the input.

<span @click="setEmail">{{ mailCheckedEmail }}</span>
methods: {
  setEmail: function () {
    this.email = this.mailCheckedEmail;
    this.mailCheckedEmail = undefined;
  }
}

Reference

Mailcheck is one of those “do one thing and do it well” client-side libraries. There’s a lot more you can do with it. For example, Mailcheck returns an object with the corrected email separated into parts (email name, domain, and full email address) instead of one big string. This can be useful if you want to present the corrected email address differently to the user like only highlighting the domain name instead of the entire email address.

Make sure you check out the GitHub repository for more information and documentation.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Derick Sozo

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel