Twitter Like Self Correcting Email Field With jQuery

All most in every web application or website you want visitors to enter their email either for registration, subscription or anything else. Collecting email id is really very important in order to communicate with your visitors, customers or readers. Most of the websites or web applications ask visitors to re-enter email id just to ensure its correctness. You would have seen in many registrations form where you have to enter your email id twice, it is done intentionally to just ensure you have entered a correct email. You can avoid this strategy of asking user to enter his email twice by implementing an intelligent email input self correcting field.

self-correcting-email-field

This post will tell you how to implement twitter like self email correction script. If user enters incorrect email (domain name part) then it will immediately tell user the correct one. For example if user enters infotuts@gmil.com the script will immediately tell him that ‘did you mean infotuts@gmail.com’? Once users clicks on the suggested email id the suggestion will be removed and email field will grab the suggested email id. This script is really important to make your web page more interactive and user friendly.

                     LIVE DEMO DOWNLOAD

So we will use a jquery plugin named “mailcheck.min.js”, developed by Kicksend. This jQuery plugin helps to reduce typos in email addresses. Let’s have a look at how this plugin works and how you can edit it as per your need. ‘mailcheck.min.js’

Now let’s see how we can use this plugin and get it working. Here’s our code:

<!DOCTYPE HTML>

<HTML>
<HEAD>
<TITLE>Twitter Like Self Email Correction Input Field - InfoTuts</TITLE>
</HEAD>
<style type="text/css">
#main {
padding: 10px;
margin: 100px;
margin-left: 300px;
color: Green;
border: 2px dotted;
width: 600px;
}
#myemail{
margin-left: 200px;
}
#msg {
color: blue;
margin: auto;
margin-left: 220px;
font-size:30px;
}
</style>
<SCRIPT src="js/jquery.min.js"></SCRIPT>

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

<BODY>
<div id="msg">
<p> Type any incorrect email like "user@gmil.co" & move away from email field <p>
</div>
<div id="main">
<FORM id="myemail">

<LABEL for=name>Name</LABEL>
<INPUT id=name type="text" placeholder="Name">
<br>
<LABEL for=email>Email</LABEL>
<INPUT id=email type="text" placeholder="Email">
<DIV id="correction"> </DIV>
</FORM>
</div>
<!-- Javascript code is placed at the bottom to load your webpage faster -->

<SCRIPT type="text/javascript">
var $email = $('#email');
var $correction = $("#correction");

$email.on('blur',function() {
$correction.css('display', 'none').empty();
$(this).mailcheck({
suggested: function(element, suggestion) {
if(!$correction.html()) {
// First error - fill in/show entire correction element
var suggestion = "Did you mean <span class='suggestion'>" +
"<span class='address'>" + suggestion.address + "</span>"
+ "@<a href='#' class='domain'>" + suggestion.domain +
"</a></span>?";

$correction.html(suggestion).fadeIn(150);
} else {
// Subsequent errors
$(".address").html(suggestion.address);
$(".domain").html(suggestion.domain);
}
}
});
});

$correction.on('click', '.domain', function() {
// On click, fill in the field with the suggestion and remove the correction
$email.val($(".suggestion").text());
$correction.fadeOut(200, function() {
$(this).empty();
});
return false;
});
</SCRIPT>
</BODY>
</HTML>

Kudos to Andrew Brel for nice implementation of mailcheck.min.js.

Mailcheck plugin takes in two call back ‘suggested‘ and ‘empty‘. You can choose only to supply ‘suggested‘ but its recommended to supply both. You can add your own You can edit the ‘mailcheck-min.js’ plugin and add more domain names and top level domains that will be checked when user enters his/her email id.