La validación de formularios es crucial para la experiencia de usuario (UX). Bootstrap 5 ofrece una forma elegante de mostrar errores sin recargar la página.

Solución Rápida (Code Snippet)

Copia este código para activar la validación instantánea en tus formularios de Bootstrap 5.

<!-- Formulario con clases de Bootstrap 5 -->
<form class="needs-validation" novalidate id="contactForm">
  <div class="mb-3">
    <label for="email" class="form-label">Correo Electrónico</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Por favor, ingresa un correo electrónico válido.
    </div>
  </div>

  <button class="btn btn-primary" type="submit">Enviar</button>
</form>

<script>
(() => {
  'use strict'
  const form = document.getElementById('contactForm')

  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }

    form.classList.add('was-validated')
  }, false)
})()
</script>

Cómo funciona

La magia reside en la combinación del atributo novalidate y la clase was-validated.

  1. novalidate: Desactiva los globos de texto por defecto del navegador para que Bootstrap tome el control.
  2. checkValidity(): Un método nativo de JavaScript que revisa si los campos cumplen con atributos como required, type="email", o minlength.
  3. was-validated: Al añadir esta clase al padre (<form>), Bootstrap aplica automáticamente los colores verde (éxito) o rojo (error) a los campos según su estado.

Ventajas de este enfoque

  • Sin Librerías Extra: Solo usas lo que ya viene en Bootstrap y JS nativo.
  • Accesibilidad: Los mensajes de error son leídos correctamente por lectores de pantalla.
  • Rendimiento: Cero latencia al validar localmente antes de enviar al servidor.

Enlaces Internos

Preguntas Frecuentes

¿Puedo personalizar los mensajes de error?

Sí, simplemente cambia el texto dentro del div con la clase .invalid-feedback.

¿Funciona con inputs dinámicos?

Sí, siempre que los nuevos inputs tengan los atributos de validación de HTML5 y el script se ejecute correctamente.