// Tutorial //

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

Published on February 2, 2018
Default avatar
By Derick Sozo
Developer and author at DigitalOcean.
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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

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!