Validar formularios Bootstrap 5 con JavaScript sin jQuery

Formularios Bootstrap 5 con restricciones HTML, checkValidity y setCustomValidity: marcado correcto, mensajes y validación en el servidor.

Validación en Bootstrap 5

Bootstrap 5 no necesita jQuery. Combina restricciones HTML como required y type=email con las clases de aviso Bootstrap y JavaScript nativo. Este formulario de prueba envía a /feedback: sustituye la ruta por un endpoint real. Carga también el CSS de Bootstrap 5.

Marcado del formulario

Añade needs-validation y novalidate al formulario. novalidate desactiva los mensajes emergentes del navegador, pero conserva la API de validación. Los campos llevan form-control, etiquetas asociadas, name, required e invalid-feedback. Muestra el HTML como código, sin insertar un formulario activo en el artículo.

<form class="needs-validation" novalidate method="post" action="/feedback">
  <div class="mb-3">
    <label class="form-label" for="name">Name</label>
    <input class="form-control" id="name" name="name" required>
    <div class="invalid-feedback">Enter your name.</div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="email">Email</label>
    <input class="form-control" id="email" name="email" type="email" required>
    <div class="invalid-feedback">Enter a valid email address.</div>
  </div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

Envío con JavaScript nativo

Escucha submit. form.checkValidity() comprueba las reglas; si falla, preventDefault() detiene el envío y was-validated muestra los avisos Bootstrap. Si todo es válido, se envía normalmente a /feedback. Una aplicación real también requiere tokens CSRF y controles en el servidor.

document.querySelectorAll('.needs-validation').forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Reglas propias

Si añades confirmEmail, compáralo con email mediante setCustomValidity(). Comprueba ambos campos en el evento input para borrar un error previo con una cadena vacía. El fragmento opcional requiere un campo id confirmEmail; traduce el texto del mensaje.

const email = document.querySelector('#email');
const confirmation = document.querySelector('#confirmEmail');
function validateMatch() {
  confirmation.setCustomValidity(
    confirmation.value === email.value ? '' : 'Email addresses differ'
  );
}
email.addEventListener('input', validateMatch);
confirmation.addEventListener('input', validateMatch);

Accesibilidad y seguridad

Bootstrap advierte que ciertos estilos personalizados de validación del lado cliente no llegan bien a las tecnologías de asistencia. Prueba teclado y lector de pantalla, o prefiere mensajes nativos o respuestas del servidor. Valida y autoriza siempre cada petición también en el servidor.

Pruebas prácticas

Prueba campos vacíos, correos incorrectos, entradas válidas y envíos repetidos. Si utilizas AJAX, quita was-validated al restablecer el aspecto del formulario. Asocia mensajes claros con los campos; las clases CSS no bastan para la accesibilidad.

Fuentes

Bootstrap 5.3: https://getbootstrap.com/docs/5.3/forms/validation/ ; API HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation .