Este artículo también está disponible en: English (Inglés)
Validar el campo del correo electrónico de los formularios de tus páginas web es uno de los aspectos más importantes de la captación online, en lo que se refiere a validación de formularios. Algunos argumentarían que es el más importante, ya que si tu negocio tiene una web, lo más seguro es que tu método principal de contacto con tus clientes sea a través de su correo electrónico.
Quiero añadir que a pesar de todas las validaciones que podamos hacerle al formulario, la única manera real de comprobar si un correo es realmente válido es mandándole un mensaje al correo y ver si rebota o no.
Dicho esto, hay unas cuantas cosas que podemos hacer en la parte del frontend para minimizar los errores en la dirección de correo, consiguiendo que tu usuario tenga una mejor experiencia y tú dispongas de los datos correctos de tu cliente.
En nuestras páginas actualmente aplicamos 3 utilidades en el campo del correo electrónico que son la validación de formato, la corrección de errores comunes y de lo que vamos a hablar en este post: las sugerencias.
Sugerencias o autocompletado
Las sugerencias y el autocompletado cada día está más presente en las aplicaciones que usamos y cada día puede que te de más miedo lo bien que te conoce el teclado predictivo de tu móvil, pero el futuro es hoy y no puedes pararlo.
Uno ya no se impresiona (y mucho menos deja de rellenar el formulario) por el hecho de que el formulario ya te rellene ciertos datos, sino que es visto como una comodidad y encima no aburres a tu cliente al estar rellenando los millones de campos de tu monótono formulario.
Vamos a ver cómo hacer que el campo de correo electrónico de tu formulario muestre sugerencias de autocompletado conforme el usuario vaya escribiendo.
Formulario
El primer paso es existir en el universo, pero el segundo, que es casi igual de redundante, es tener un formulario donde el usuario introduzca sus datos.
El formulario no tiene misterio, el único requisito es que tenga un input de tipo email.
<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
Ahora viene lo divertido, vamos a sugerir el correo.
Antes que nada, vamos a hacer algo de trampa: importemos jQuery.
Y también vamos a crear el archivo script.js e importarlo para añadirle la lógica.
A continuación se ve cómo tiene que quedar el <head> de tu HTML para importar jQuery y tu nuevo documento script.js.
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="./scripts.js"></script>
</head>
Ahora ya está todo listo para añadir el script de autocompletado.
Para ser más concretos: lo que queremos es que cada vez que se introduzca un carácter en el campo, se realice una búsqueda para ver si hay algún dominio común que empiece de esa manera y sugerírsela al usuario. También queremos que el campo se rellene automáticamente con el texto autocompletado si el usuario le quita el foco al campo, pulsa al tabulador o pulsa la flecha derecha.
Y en lugar de pasarme varios días tratando cadenas de caracteres en Javascript para conseguir este funcionamiento, vamos a usar el plugin de jQuery llamado Email Autocomplete, que hace exactamente lo que buscamos.
Puedes copiar directamente el script minificado de jquery.email-autocomplete.min.js y pegarlo en script.js.
Finalmente, para usarlo, esperaremos a que tu DOM se haya cargado e inyectaremos la función emailAutocomplete({suggClass: “clase-del-texto-predictivo”}) sobre cada campo de correo que queramos que tenga esta funcionalidad.
Debería quedar algo así:
/* 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"
});
})
});
Estilos
Yo le he añadido un par de estilos para que se viera un poco más bonito, pero eso al gusto de cada uno. Lo que sí será necesario es que cambies el color del texto autocompletado para diferenciarlo de lo que está escribiendo el usuario, este texto es accesible a través del nombre del parámetero suggClass que hemos definido en nuestro script.js.
¡Y ya estaría!
Así se ve en funcionamiento:
Encuentra el código completo de este proyecto en nuestro Github.
Mi intención es continuar con los artículos sobre el campo de emails e indagar en mi próximo post en cómo podemos corregir los errores de nuestros usuarios y cómo podemos garantizar la validez del email.
¡Así que manténganse al tanto!