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

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:

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.

<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.