This post is also available in: Español (Spanish)

Validating the email field of your web form is one of the most important aspects of online marketing, when it comes to form validation. Some would even argue that it’s the most important one, because if your business has a website, your main method of contacting your customers will most likely be through their email.

I would like to add that despite all the validations we can make to the form, the only real way to check if an email is really valid is to send a message to the address and see if it bounces or not.

That said, there are a few things we can do in the frontend to minimize email address errors, making the user experience better and giving you peace of mind knowing that the emails are not misspelled.

In our pages we currently apply 3 utilities in the email field, which are format validation, correction of common errors and what we will talk about in this post: the suggestions.

Suggestions or autocompletion

Suggestions and autocompletion are more and more present in the applications we use and every day, you might be afraid of how well the predictive keyboard of your phone knows you, but the future is now and you can’t stop it.

One is no longer impressed (much less stopped from filling out the form) by the fact that the form already fills in certain data, but rather it is seen as a convenience and on top of that you don’t bore your client while filling in the millions of fields of your monotonous form.

Let’s see how to make the email field of your form show autocompletion suggestions as the user types.

Form

The first step is to exist in the universe, but the second, which is almost as redundant, is to have a form where the user enters his data.

The form is no mystery, the only requirement is that it has an email type input.

<form class="" id="contact-form" method="POST"
                enctype="application/x-www-form-urlencoded">

                <div class="form-group">
                    <input aria-describedby="name"
                        class="form-control" name="name"
                        id="name" placeholder="Name" type="text" required>
                </div>

                <div class="form-group">
                    <input aria-describedby="email" class="form-control"
                        id="email" name="email" placeholder="E-mail" type="email" required>
                </div>
                <button type="submit">Send</button>
            </form>

Script

Now comes the fun part, let’s suggest the mail.

First of all, let’s do some cheating: let’s import jQuery.
And we will also create the script.jscode> file and import it to add the logic to it.

Here is how the <head>code> of your HTML has to look like to import jQuery and your new script.jscode> document.

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="./scripts.js"></script>
</head>

Now everything is ready to add the autocompletion script.

To be more specific: what we want is that every time a character is entered in the field, a search is performed to see if there is a common domain that starts that way and suggest it to the user. We also want the field to be automatically filled in with the suggested text if the user removes the focus from the field, presses the tab key or presses the right arrow.

And instead of spending several days trying strings of characters in Javascript to get this working, we are going to use the jQuery plugin called Email Autocomplete, which does exactly what we are looking for.

You can directly copy the minified script from jquery.email-autocomplete.min.js and paste it into script.jscode>.

Finally, to use it, we will wait until your DOM has loaded and we will inject the function emailAutocomplete({suggClass: “clase-del-texto-predictivo”})code> into each email field where we want to have this functionality.

It should look something like this:

/* script.js */

/* email-autocomplete - 0.1.3 */!function(a,b,c,d){function e(b,c){this.$field=a(b),this.options=a.extend(!0,{},f,c),this._defaults=f,this._domains=this.options.domains,this.init()}var f={suggClass:"eac-sugg",domains:["yahoo.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","outlook.com","icloud.com"]};e.prototype={init:function(){Array.prototype.indexOf||this.doIndexOf(),this.fieldLeftOffset=null;var b=a("<div class='eac-input-wrap' />").css({display:this.$field.css("display"),position:"static"===this.$field.css("position")?"relative":this.$field.css("position"),fontSize:this.$field.css("fontSize")});this.$field.wrap(b),this.$cval=a("<span class='eac-cval' />").css({visibility:"hidden",position:"absolute",display:"inline-block",fontFamily:this.$field.css("fontFamily"),fontWeight:this.$field.css("fontWeight"),letterSpacing:this.$field.css("letterSpacing")}).insertAfter(this.$field);var c=(this.$field.outerHeight(!0)-this.$field.height())/2;this.$suggOverlay=a("<span class='"+this.options.suggClass+"' />").css({display:"block","box-sizing":"content-box",lineHeight:this.$field.css("lineHeight"),paddingTop:c+"px",paddingBottom:c+"px",fontFamily:this.$field.css("fontFamily"),fontWeight:this.$field.css("fontWeight"),letterSpacing:this.$field.css("letterSpacing"),position:"absolute",top:0,left:0}).insertAfter(this.$field),this.$field.on("keyup.eac",a.proxy(this.displaySuggestion,this)),this.$field.on("blur.eac",a.proxy(this.autocomplete,this)),this.$field.on("keydown.eac",a.proxy(function(a){39!==a.which&&9!==a.which||this.autocomplete()},this)),this.$suggOverlay.on("mousedown.eac touchstart.eac",a.proxy(this.autocomplete,this))},suggest:function(a){var b=a.split("@");return b.length>1?(a=b.pop(),a.length?(this._domains.filter(function(b){return 0===b.indexOf(a)}).shift()||"").replace(a,""):""):""},autocomplete:function(){if(void 0===this.suggestion||this.suggestion.length<1)return!1;this.$field.val(this.val+this.suggestion),this.$suggOverlay.text(""),this.$cval.text("")},displaySuggestion:function(a){this.val=this.$field.val(),this.suggestion=this.suggest(this.val),this.suggestion.length?a.preventDefault():this.$suggOverlay.text(""),this.$suggOverlay.text(this.suggestion),this.$cval.text(this.val),null===this.fieldLeftOffset&&(this.fieldLeftOffset=(this.$field.outerWidth(!0)-this.$field.width())/2);var b=this.$cval.width();this.$field.outerWidth()>b&&this.$suggOverlay.css("left",this.fieldLeftOffset+b+"px")},doIndexOf:function(){Array.prototype.indexOf=function(a,b){if(void 0===this||null===this)throw new TypeError('"this" is null or not defined');var c=this.length>>>0;for(b=+b||0,Math.abs(b)===1/0&&(b=0),b<0&&(b+=c)<0&&(b=0);b<c;b++)if(this[b]===a)return b;return-1}}},a.fn.emailautocomplete=function(b){return this.each(function(){a.data(this,"yz_emailautocomplete")||a.data(this,"yz_emailautocomplete",new e(this,b))})}}(jQuery,window,document);

/* Form code */
jQuery(document).ready( function () {

    /* Client email validation */
    jQuery("#contact-form input[type='email'].form-control").each(function () {
        jQuery(this).emailautocomplete({
            suggClass: "clase-del-text-predictivo"
        });
    })

});

Styles

I’ve added a couple of styles to make it look a little nicer, but everyone has a different taste so I leave that up to you. What you will need todo is change the color of the suggested text to differentiate it from what the user is typing, this text is accessible through the parameter name suggClass that we have defined in our script.jscode>.

And that would be it!

This is how it looks when it works:

Find the full code for this project in our Github.

My intention is to continue with the articles about the email field and investigate in my next post how we can correct the errors of our users and how we can guarantee the validity of the email.

So stay tuned!

Autocomplete in email field with jQuery.

Suggestions or autocompletion

Form

Script

Styles

Leave a Reply Cancel reply