The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.
When your user types in "[email protected]", Mailcheck will suggest "[email protected]".
Mailcheck will offer up suggestions for top level domains too, and suggest ".com" when a user types in "[email protected]".
At Kicksend, we use Mailcheck to help reduce typos in email addresses during sign ups. It has reduced our sign up confirmation email bounces by 50%.
See it live in action here.
For instant use, download src/mailcheck.min.js into javascripts directory. Use src/mailcheck.js if you want to hack on it, or have your own minimizer.
First, include jQuery and Mailcheck into the page.
<script src="jquery.min.js"></script>
<script src="mailcheck.min.js"></script>Have a text field.
<input id="email" name="email" type="text" />Now, attach Mailcheck to the text field. You can declare an array of domains and top level domains you want to check against.
<script>
var domains = ['hotmail.com', 'gmail.com', 'aol.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, // optional
topLevelDomains: topLevelDomains, // optional
distanceFunction: superStringDistance, // optional
suggested: function(element, suggestion) {
// callback code
},
empty: function(element) {
// callback code
}
});
});
</script>Mailcheck takes in two callbacks, suggested and empty. We recommend you supply both.
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:
{
address: 'test', // the address; part before the @ sign
domain: 'hotmail.com', // the suggested domain
topLevelDomain: 'com', // the suggested top level domain
full: '[email protected]' // the full suggested email
}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.
Mailcheck is decoupled from jQuery, so its usage without jQuery is almost identical.
Using the example from above, you would call Kicksend.mailcheck.run instead.
<script>
Kicksend.mailcheck.run({
domains: domains, // optional
topLevelDomains: topLevelDomains, // optional
distanceFunction: superStringDistance, // optional
suggested: function(suggestion) {
// callback code
},
empty: function() {
// callback code
}
});
</script>The rest works similarly. In fact, the Mailcheck jQuery plugin just wraps Kicksend.mailcheck.run.
Mailcheck has inbuilt defaults if the domains or topLevelDomains options aren't provided. We still recommend supplying your own domains based on the distribution of your users.
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 included default top level domains are com, net, org, info, edu, gov, co.uk, and mil.
The Mailcheck jQuery plugin wraps Kicksend.mailcheck. The prime candidates for customization are the methods
Kicksend.mailcheck.findClosestDomain and Kicksend.mailcheck.stringDistance.
Mailcheck currently uses the sift3 string similarity algorithm by Siderite. You can modify the inbuilt string distance function, or pass in your own when calling Mailcheck.
Since Mailcheck runs client side, keep in mind file size, memory usage, and performance.
Mailcheck is tested with Jasmine. Load spec/spec_runner.html in your browser to run the tests.
Let's make Mailcheck awesome. We're on the lookout for maintainers and contributors.
And do send in those pull requests! To get them accepted, please:
-
Test your code. Add test cases to
spec/mailcheckSpec.js, and run it across browsers (yes, including IE). -
Minify the plugin. Google's Closure Compiler is a good one.
Upcoming features, bugs and feature requests are managed in Issues.
Do you use Mailcheck? Tweet me your link.
Derrick Ko (@derrickko)
Copyright (c) 2012 Receivd, Inc.
Licensed under the MIT License.