Validación de listas de e-mails con input email y multiple o e-mail REGEX

En el artículo input type email REGEX pattern aprendimos a crear una REGEX para validar email. Hoy veremos cómo validar una lista de e-mails, o lo que es lo mismo, validar un campo que contenga multiples emails, gracias al atributo multiple, o alternativamente adaptando la REGEX que ya vimos en el anterior artículo.

Usos de input email con multiple

Aunque probablemente sea poco común, validar listas de email puede sernos útil si por ejemplo queremos crear un formulario de correo que incluya campos de destinatario, CC o CCO. La validación de múltiples emails puede parecer compleja a priori, pero vamos a ver que HTML5 nos facilita la labor.

Curiosidad: ¿Sabías que el significado de CC es Copia de Carbón? Estamos habituados a escuchar «envía el correo con copia al jefe» o «…con copia oculta…» y probablemente hayamos dado por hecho que ese es su significado si no hemos escuchado nunca el nombre real del campo, pues su origen se remonta a tiempos anteriores a Internet, cuando el correo que requería dejar constancia (ser archivado) o ser enviado a más de un destinatario, se escribía, ya fuese a mano o a máquina, sobre un papel con varias capas entre las que había una hoja de papel carbón. Y de ahí vienen las siglas CC y CCO.

¿Cómo validar listas de email?

Para validar un campo cuyo valor se espera sean múltiples e-mails, al igual que con un campo de e-mail simple, tenemos dos opciones: hacerlo mediante la validación nativa de HTML5 o usar pattern añadiendo algo de sofisticación a la REGEX.

Validar con el atributo HTML5 multiple

La forma más sencilla de construir un campo multi e-mail es con el atributo multiple de la API de HTML5. Este atributo aplica a input type email y type file, y etiquetas <select> con idéntico y excelente soporte en navegadores.

A pesar de ello no está muy documentado y tampoco hay mucha literatura sobre él.

<input type="email" multiple />

Cuando incluimos el atributo multiple para un input type email, admitirá múltiples valores de e-mail separados por coma, pudiendo incluir, o no,  cualquier cantidad de espacios antes o después de ésta, pues serán automáticamente obviados. Sin embargo no admitirá punto y coma (;).

Podremos así mismo utilizar la las pseudoclases :valid e :invalid para dar estilos a ambos estados del input. Siempre que la coma se encuentre entre dos correos válidos, devolverá :valid; en caso contrario, devolverá :invalid.

value = local@dominio.tld, local@dominio.tld /*devuelve :valid*/
value = local@dominio.tld, /*devuelve :invalid*/
value = ,local@dominio.tld /*devuelve :invalid*/

IMPORTANTE: type:email y el atributo multiple NO son compatibles con la validación con pattern.

Validación con pattern y REGEX multi-email

Esta es la aproximación compleja al problema, pero en compensación nos aporta mayor control sobre el formato de correo y además de la coma (,) nos permite utilizar punto y coma (;) devolviendo :valid incluso si es el último correo introducido.

Tomamos prestada la REGEX para email (ver enlace al inicio del artículo):

([a-zA-Z0-9!#$%&'*\/=?^_`{|}~+-]([\.]?[a-zA-Z0-9!#$%&'*\/=?^_`{|}~+-])+@[a-zA-Z0-9]([^@&%$\/()=?¿!.,:;]|\d)+[a-zA-Z0-9][\.][a-zA-Z]{2,4}([\.][a-zA-Z]{2})?)

Para facilitar la visualización, sustituimos en el ejemplo la REGEX por [$emailregex]:

[$emailregex]([,;]\s?) [$emailregex])*[,;]?

1. En primer lugar, añadimos la regex tal cual: [$emailregex].
2. Ahora ya podemos añadir el separador que podrá ser una coma (,) o un punto y coma (;) y llevar, o no, un espacio (\s?) a continuación: [,;]\s?
   El signo de interrocación (?) validará si hay 0 ó 1 espacios (\s).
3. A continuación volvemos a poner nuestra REGEX para email y englobamos ambos, separador y segunda REGEX, en un grupo que validará si aparece una o más veces:  (…)*
4. Finalmente añadimos las posibilidad de que vaya cerrado por una coma o un punto y coma: [,;]?

Y con esto ya tendríamos nuestra REGEX para validación de listas de email con pattern. Por supuesto podéis modificar los separadores y permitir sólo uno de los dos mientras se lo indiquéis al usuario por medio del atributo placeholder, el title y los mensajes de validación en caso de que los incluyáis.

Ejemplos de input type email con multiple e e-mail REGEX

Para finalizar el artículo os dejo un ejemplo en vivo de ambos casos de validación de listas de correo con HTML5.

See the Pen email pattern by Jesuke (@jesuke) on CodePen.

Como siempre espero vuestras dudas y comentarios. Y si queréis recibir puntualmente las últimas novedades en castellano sobre UX, HTML5 y CSS3, podéis suscribiros desde la página de inicio.

Saludos!! 🙂