12 May 2012
I recently stumbled across mailcheck.js, a little jQuery plugin from Kicksend that suggests domains based on common typos in email forms. For example, 'email@example.com' will generate a suggestion for 'firstname.lastname@example.org'. It's perfect for preventing errors in user signups, and the authors claim its reduced their email bounces by 50%. After playing around with it, I've decided to bundle it into production for most, if not all of my projects, and this is just a brief demo of what can be done with it.
Getting Set Up
The setup is only a few lines, although it's important to understand what's going on. Our HTML is fairly straightforward - we start with a generic input that we'll be using the plugin on. The
mailcheck() function to our email field on its blur event, which is called whenever the element loses focus (i.e., the user moves on to the next field). Mailcheck takes two callbacks,
suggested() is called whenever a suggestion is available for the field, and
empty() whenever the field is left blank. We'll only be using
suggested() in this demo, although depending on how you use the plugin it's generally a good idea to use both.