Every now and then, a plugin comes about that has a good idea. Recently, this has been the mailcheck jquery plugin by Kicksend. According to their claims, it has reduced typos in emails during user signups by over 50%.

The plugin works by comparing the domain typed vs a list of pre-configured popular TLDs for email, such as gmail.com, hotmail.com and so forth – and providing recommendations based upon string similarity. As a result, typing ‘foo@gnail.com’ ought to offer a suggestion ‘Did you mean foo@gmail.com?’

We decided to implement it at work and I sat down to convert it to mootools. Regretfully, none of the code of the original plugin remains, including the string distance algo ‘sift3′, which proved inaccurate and failing in IE7.

The result? A brand-spanking-new mootools.mailcheck.js (on github) for your pleasure (specific github project pages here

The mootools version now features a few improvements over the original, namely:

• choice of method for determining string distance between Levenstein (the default choice) and sift3
• more performant
• look-up cache – any strings compared that return a match are cached
• shared cache – any new instances created will benefit from old lookups, useful for use in single page applications
• automated testing via buster.js – all included with a kick start guide.

Visit the repo and give it a go, it’s a solid idea now. I have even included a jsfiddle demo and it comes with little mysql query that will grab the most popular email domains from your existing user database so you can set it up to suit your own target audience.

View a video of CI auto testing via buster.js on this plugin:

It’s annoying. There are sorts of crawlers that fetch all sorts of emails from websites and then sell the lists to Chinese and Russian spammers. I believe another term for this is harvesters… Yet, we do need to leave users a means of contacting the site owner / admin / customer service rep. The solution? Javascript / mootools can fix this with 3 lines of code, making it impossible for a crawlers to identify an email address and yet the mailto: link will remain fully functional to the browser.

As usual, stick this in your mootools domready function:

// hidden emails
$$("a.mailLink").each(function(el) {
    el.set("href", "mailto:" + el.get("data-user") + "@" + el.get("data-domain") + "?subject="+ el.get("data-subject"));
});

Now, whenever you want to place a mailto: link, format it like so, assigning it the mailLink class:

<a href="mailto:" class="mailLink" data-user="christoff" data-domain="gmail.com" data-subject="link exchange">mail me</a>

We are using element storage behind the data- name space in the style of HTML 5, joining the different parts of the mail address together via javascript. Of course, should you wish to, you can opt for using the title=”" tag and use JSON instead, allowing you to keep to older doctypes, something like this:

<a href="mailto:" class="mailLink" title="{user:'christoff',domain:'gmail.com',subject:'link exchange'}">mail me</a>

You’d have to adjust the script above to process the JSON and to revert the title attribute to something more readable:

// hidden emails, dependencies: JSON
$$("a.mailLink").each(function(el) {
    var mailProperties = JSON.decode(el.get("title"));
    el.set({
        "href": "mailto:" + mailProperties.user + "@" + mailProperties.domain + "?subject="+ mailProperties.subject,
        "title": "Send a mail to "+ mailProperties.user + "@" + mailProperties.domain
    });
});

I hope this helps you somewhat.