wpdevco
2/4/2015 - 7:16 PM

Using mailcheck.js

Using mailcheck.js

var $email = $('input[type="email"].mailcheck');
var $hint = $('#mailcheck-hint');
var typingTimer;
var doneTypingInterval = 500;

$email.keyup( function() {
	    
    $hint.css('display', 'none').empty();
    clearTimeout(typingTimer);
      
    $(this).mailcheck({
	      
        suggested: function(element, suggestion) {
          
            if(!$hint.html()) {
	          
                var suggestion = "<i class='fa fa-exclamation-circle'></i> Do you mean <span class='suggestion'>"
                                + "<span class='address'>" + suggestion.address + "</span>"
                                + "@<a href='#' class='domain'>" + suggestion.domain + "</a></span>?";
                              
                typingTimer = setTimeout(function() { 
                    
                    $hint.html(suggestion).fadeIn(150);
                }, doneTypingInterval);
            } 
            else {
	          
                $(".address").html(suggestion.address);
                $(".domain").html(suggestion.domain);
            }
        }
    });
});

$hint.on('click', '.domain', function() {

    $email.val($(".suggestion").text());
      
    $hint.fadeOut(200, function() {
	      
        $(this).empty();
    });
      
    return false;
});
<form action="" method="post" target="_blank">
    <input type="email" value="" name="EMAIL" class="mailcheck required email" placeholder="enter email">
    <div id="mailcheck-hint"></div>
    <input type="submit" value="Submit" name="submit" class="button">
</form>
add_action( 'wp_enqueue_scripts', 'wpdevco_enqueue_things' );
function wpdevco_enqueue_things() {
		
    wp_enqueue_script( 'mailcheck', CHILD_SCRIPTS_URL . '/mailcheck.min.js', array( 'jquery' ), '1.1.0', true );
}