Alert user while typing invalid domain name using jQuery

It is very much possible that at the time of signup, user make mistake while entering the correct domain. For example, instead of "hotmail.com", user types "hotnail.com". And the wrong email address gets saved in database. And later on, when your website sends an email, the email will bounce. In this post, I will show you a jQuery plugin called "Mailcheck" which suggest possible correct domain.

Mailcheck.js is a jQuery plugin that suggests a possible right domain when your users misspell it in an email address. For example when your user types in "user@hotnail.con", Mailcheck will suggest "user@hotmail.com".


How to use it?


All one need to do is to call "mailcheck" function on blur event of the textbox and it will do the rest. Mailcheck takes in two callbacks, suggested and empty.

suggested is called when there's a suggestion. Mailcheck passes in the target element and the suggestion. The suggestion is an object with the following members:
//Code Starts
{
  address: 'test',          // the address; part before the @ sign
  domain: 'hotmail.com',    // the suggested domain
  full: 'test@hotmail.com'  // the full suggested email
}
//Code Ends
empty is called when there's no suggestion. Mailcheck just passes in the target element. You can use the callbacks to display the appropriate visual feedback to the user.
//Code Starts
$(document).ready(function() {
  $('#txtEmail').on('blur', function() {
    $(this).mailcheck({
      suggested: function(element, suggestion) {
        $('#spnSuggest').show();
        $('#spnSuggest').html("Did you mean '" + suggestion.full + "'?");
      },
      empty: function(element) {
         $('#spnSuggest').hide();
      }
     });
  });
});​
//Code Ends
See result below.



The included default domains are: 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, and mail.com.

The Mailcheck jQuery plugin uses the defaults to a list of top email domains if the domain option isn't provided. You can also provide list of domains based on the distribution of your users.

Below is the jQuery code that defines list of own domains. So now the plugin will only suggest for these 3 domains.
//Code Starts
var domains = ['hotmail.com', 'gmail.com', 'yahoo.com'];
$('#txtEmail').on('blur', function() {
    $(this).mailcheck({
      domains: domains,
      suggested: function(element, suggestion) {
        $('#spnSuggest').show();
        $('#spnSuggest').html("Did you mean '" + suggestion.full + "'?");
      },
      empty: function(element) {
         $('#spnSuggest').hide();
      }
     });
  });
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..