Building a self-correcting email input field


Email is one of the common input fields in any web form. Many sites use two email fields to make sure that the user has entered correct email ids. This is a common idiom in web design, and it is surprising that it has not changed over all these years. One of the interesting alternative I found is the ‘MailCheck’ JavaScript library. The library enables you to offer the user a suggestion for the domain name if he makes a mistake while entering. A demo is shown below.

Enter an email id in the ‘E-mail’ field below with an incorrect domain name, like ‘test@hotmeil.com’ and change the focus to the ‘Name’ field. The form should then offer a suggestion on the correct domain name. Note that the script will only try to check for incorrect name in the domain part of the email address and not the local part, the one before the ‘@’ sign. The script also checks for the correct top level domain (TLD).


The script works by finding a similar domain name in its list of names and returns a domain name that is within a certain distance between the incorrect domain name entered. This post will explain how to integrate the MailCheck library into your web form.

Installation & Setup

Installation is simple. Download mailcheck.min.js from GitHub into your JavaScript directory along with a local or CDN copy of jQuery.

<script src="jquery.min.js"></script>
<script src="mailcheck.js"></script>

Define your email input field along with your other fields. For example, the fields for the above demo are given below. The suggest element will later hold the suggested domain returned by Mailcheck.

<form class="form">
    <p class="email">
        <input type="text" name="email" id="email" />
        <label for="email">E-mail</label>
    </p>
    <span id="suggest"></span>
    <p class="name">
        <input type="text" name="name" id="name" />
        <label for="name">Name</label>
    </p>
</form>

Add the ‘MailSend’ initialization script to your page, preferably at the bottom. The following code is then called whenever the ‘email’ input field loses focus.

<script>
$('#email').on('blur', function() {
  $(this).mailcheck({
    suggested: function(element, suggestion) {
          $("#suggest").html("Did you mean :<b>" + suggestion.full + "</b>");
    },
    empty: function(element) {
      $("#suggest").html("");
    }
  });
});
</script>

Mailcheck takes in two callbacks, suggested and empty. The suggested callback is fired when there’s a suggestion for a possible incorrect email domain. empty callback is fired when there is no suggestion. Mailcheck passes in the target element and the suggestion. The suggestion object has the following members, in the above code we have used the full attribute:

{
  address: 'test',          // the address; part before the @ sign
  domain: 'hotmail.com',    // the suggested domain
  topLevelDomain: 'com',    // the suggested top level domain
  full: 'test@hotmail.com'  // the full suggested email
}

Mailcheck compares the entered email ids domain with the ones included in the library, which includes the following. You can add additional domain by editing the ‘mailcheck.js’ file.

"yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", 
"aol.com", "mac.com", "live.com", "comcast.net", "googlemail.com", 
"msn.com", "hotmail.co.uk", "yahoo.co.uk", "facebook.com",
"verizon.net","sbcglobal.net", "att.net", "gmx.com", "mail.com"

It also include the following top level domains.

"co.uk", "com", "net", "org", "info", "edu", "gov", "mil"

How does the domain suggestion work

Mailcheck relies on a String Edit Distance algorithm to find strings that are within a certain distance of each other. Also know as ‘Levenshtein distance‘; Informally, the Levenshtein distance between two words is equal to the number of single-character edits required to change one word into the other.

For example ‘test@hotmeil.com’ and ‘test@hotmail.com’ are 1 distance apart. ‘sameer@yaho.com’ and ‘sameer@yahoo.com’ are 1.5 distance apart. The MailCheck library edit-distance threshold is set to 3. i.e, string which have a edit distance greater than 3 are ignored.

Mailcheck uses the ‘Sift3‘ algorithm to compute the Levenshtein distance between two strings, but you can also use your own algorithm if you think that it is superior or more to your requirement.

Changing default options

You can override the default options, like the domain list, top level domain names, and the algorithm used. For example, the following code restricts the domains to hotmail, gmail and yahoo and uses a custom distance algorithm (not given here). You can also override the default ‘Sift3′ algorithm with your own. But for most general purposes the defaults should work fine.

<script>
var domains = ['hotmail.com', 'gmail.com', 'yahoo.com'];
var topLevelDomains = ["com", "net", "org"];
 
var superStringDistance = function(string1, string2) {
  // a string distance algorithm of your choosing
}
 
$('#email').on('blur', function() {
  $(this).mailcheck({
    domains: domains,
    topLevelDomains: topLevelDomains,
    distanceFunction: superStringDistance,
    suggested: function(element, suggestion) {
          $("#suggest").html("Did you mean :<b>" + suggestion.full + "</b>");
    },
    empty: function(element) {
      $("#suggest").html("");
    }
  });
});
</script>

This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.

4 Responses

1

Shantanu Oak

October 17th, 2012 at 10:16 pm

This is very creative. Thanks for sharing.
php has a function called checkdnserr to check if DNS server is responding. github link…

http://tinyurl.com/bns8bjh

2

Steinar E. Rossing

November 10th, 2012 at 1:10 pm

Very nice. I’ve always found the “Verify e-mail”-fields to be reduntant as I’m sure most people like me just do a copy/paste from their first e-mail entry field.

But I think while at it, why not use php’s getmxrr?

DNS lookups are fast and inexpensive in terms of processing, and is much less likely to return false positives.

See discussion at http://www.php.net/manual/en/function.getmxrr.php for more methods on using getmxrr for email validation.

3

Steinar E. R.

November 10th, 2012 at 1:21 pm

Ah, sorry – came here via some php-related website, and didn’t see until I had posted that this article didn’t mention php at all – only the TP.

I guess my habits of using ajax calls and server side processing have become too much a routine :-)

4

Kartik jagdale

November 12th, 2012 at 12:41 am

Nice post and very intresting may be i can use this as my mini project in ma clg.
Ma blog: Http://insecuregeek.blogspot.com

Your thoughts

Sign up for fresh content in your email