Como Validar Varios Correos al Mismo Tiempo con Puro HTML

3 minuto(s)

En esta página:

Demo

HTML es un lenguaje de marcado (no de programación), que cuenta con muchas características que por la falta de inmersión profunda a este lenguaje no hacemos. Esto es normal ya que a veces solo nos enfocamos en hacer que una página web cumpla su proposito y tenga una diseño agradable o para cumplir los requerimientos de un cliente. En HTML existe una manera nativa de verificar al mismo tiempo si varios correos son válidos, en este Post te enseñaré a Como Validar Varios Correos al Mismo Tiempo con Puro HTML, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” y “Consejos Para Entrenar Tu Memoria de Programador” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Validar Varios Correos al Mismo Tiempo con Puro HTML.

Como Validar Varios Correos al Mismo Tiempo con Puro HTML

HTML nos permite agregar diferentes atributos a los elementos de una página web, en este caso nos enfocaremos en un elemento input de tipo email. Por ejemplo tenemos el siguiente input email:


<!-- Agrega los atributos 'required' y 'multiple' --> 
<input type="email" id="email" name="email" placeholder="Ingresa los Emails" required multiple>

Fijate en el código anterior, he agregado los atributos required y multiple. Veamos a continuación para que sirven estos atributos.

required

Este atributo hace que el usuario ingrese de manera obligatoria al menos un correo.

multiple

Este atributo permite que el usuario pueda escribir varios correos al mismo tiempo.

Entonces con los 2 atributos mencionados anteriormente, podemos validar múltiples correos al mismo tiempo, por ejemplo en la siguiente imagen ingresamos 3 correos separados por comas y fijate que el segundo correo esta mal escrito o tiene un formato no deseado y automáticamente HTML lo valida y lanza una advertencia indicando que el correo esta mal escrito:

A continuación te dejo todo el código que he usado para este proyecto (En la imagen anterior he usado clases CSS de Bootstrap, asi que no te preocupes por el diseño, igual va funcionar la validación de múltiples correos al mismo tiempo):


<form>
  <input type="email" id="email" name="email" placeholder="Ingresa los Emails" required multiple>
  <button type="submit">Aceptar</button>
</form>

<form>

<button type="submit">Aceptar</button>

</form>

De esta manera rápida y sencilla entonces puedes validar múltiples correos al mismo tiempo, usando solo código HTML. Recuerda que si quieres hacer validaciones de múltiples correos más complejas, es recomendable usar el Lenguaje de Programación JavaScript para ello.

Conclusión

En este tutorial has aprendido a como validar a como validar múltiples correos al mismo tiempo, esta manera es una de las muchas formas que existen, sobre todo apoyandose en otros lenguajes de programación como JavaScript, también existen librerias y herramientas para hacerlo.