Validating email addresses

Uno de los valores para el atributo "type" es "email". Usando este tipo de campo en lugar de un campo tipo texto, el navegador usa una expresión regular para verificar que el usuario haya ingresado una dirección de correo electrónico. ¿Esto significa que el usuario no puede meter una dirección de correo electrónico falsa? No. Pero ya no debes preocuparte de que el usuario ingrese una coma en vez de un punto o que accidentalmente ingrese un espacio. No importa lo que el usuario envíe, lo que importa es que luzca como una dirección de correo electrónico. Así se ve:

<form>
	<input type="email" required /> <br />
	<input type="submit" value="Submit Now!">
</form>

Algunos navegadores solo buscan la @ y otros navegadores buscan un patrón que contenga una @ seguida de al menos una letra y un punto.

En la actualidad, esto no es compatible, por ejemplo, con Internet Explorer 9.0 y versiones anteriores ni con el navegador de Android. Esto significa que para tener una correcta validación de correo electrónico para esos navegadores, debes trabajar en una solución alterna para tener esta característica funcionando en todos los navegadores. Esto no significa que no se deba implementar el atributo "email", porque si el navegador no reconoce type="email", solo lo tratará como type="text" y lo representará como campo de texto plano.

Usando patrones para validar direcciones de correo electrónico.

Otra forma de validar direcciones de correo electrónico es usando el atributo "pattern". Como se mencionó en el capitulo sobre patrones, el patrón puede ser cualquier cosa que se especifique y se basa en expresiones regulares. No profundizaré en el tema de las expresiones regulares ya que es un tema muy extenso.

Todo lo que necesitas saber para usar patrones para validar direcciones de correo electrónico, es qué patrón usar. La siguiente expresión regular de correo electrónico en HTML5 se acerca a un completo ejemplo de como podría verse tu patrón. (Gracias a Gervase Markham). Así es como se ve el patrón:

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

Como puedes ver, el patrón es muy complejo, pero básicamente verifica que lo que ingresó el usuario se vea como una dirección de correo electrónico normal como janedoe@unknow.com

<form>
	<input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
	<br />
	<input type="submit" value="Submit Now!">
</form>

¿Type="email" o patrón?

Como ambas formas de validar direcciones de correo electrónico tienen sus pros y sus contras, depende de ti decidir cuál usar. No debes intentar usarlas al mismo tiempo ya que esto podría provocar un choque en los navegadores que soporten ambas características. Usar el type="email" tiene la ventaja que es semánticamente correcto, usar el atributo pattern tiene la ventaja de que hay en la web varios polyfills de fácil uso que aseguran la compatibilidad para un mayor rango de audiencia.

Qué has aprendido

• Usando HTML5, la manera semánticamente correcta de validar una dirección de correo electrónico es establecer el atributo "type" como "email", type="email"
• No todos los navegadores buscan el mismo patrón cuando validan direcciones de correo electrónico.
• También puedes usar el atributo "pattern" para validar direcciones de correo electrónico
• El type="email" garantiza un HTML5 semánticamente correcto, mientras que el atributo "pattern" puede garantizar con más frecuencia una dirección de correo electrónico válida.
• El atributo "pattern" puede ser apoyo para usar en un polyfill