Utilizar la validación de formularios en Bootstrap 5

1. Validación básica con HTML5

Bootstrap no implementa un sistema de validación propio desde cero. En realidad se apoya en las validaciones nativas de HTML5 y simplemente aplica estilos visuales para indicar si un campo es válido o inválido.

Un ejemplo simple sería:

<form>
  <div class="mb-3">
    <label for="nombre" class="form-label">Nombre</label>
    <input type="text" class="form-control" id="nombre" required>
  </div>

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

• required: indica que el campo es obligatorio.

Sin embargo, para que Bootstrap muestre correctamente los estilos de validación necesitamos usar una pequeña configuración adicional.

2. Activar validación en Bootstrap

Bootstrap recomienda añadir la clase needs-validation y desactivar la validación automática del navegador con novalidate.

Ejemplo completo:

<form class="needs-validation" novalidate>

  <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">Introduce un correo válido</div>
  </div>

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

</form>

Esto desactiva la validación nativa de HTML5 del navegador, que normalmente mostraría sus propios mensajes de error.

Sin embargo, esto no significa que ya tengamos un sistema de validación funcionando. Lo único que hemos hecho hasta ahora es preparar el formulario para usar la validación personalizada de Bootstrap.

3. Mensajes de error con invalid-feedback

Bootstrap permite mostrar mensajes de error utilizando la clase invalid-feedback.

Ejemplo:

<div class="invalid-feedback">
  Este campo es obligatorio
</div>

Este mensaje se mostrará automáticamente cuando el campo tenga el estado inválido con la clase is-invalid o cuando el formulario detecte que el campo no cumple las reglas definidas.

4. Mensajes de éxito con valid-feedback

También podemos mostrar mensajes positivos cuando los datos son correctos.

<div class="valid-feedback">
  Todo correcto
</div>

Ejemplo completo:

<div class="mb-3">

  <label for="usuario" class="form-label">Usuario</label>
  <input type="text" class="form-control" id="usuario" required>

  <div class="valid-feedback">Nombre válido</div>

  <div class="invalid-feedback">Este campo es obligatorio</div>

</div>

5. Validación con JavaScript

Para activar el sistema de validación de Bootstrap debemos usar un pequeño script.

Este código es el que recomienda la documentación oficial de Bootstrap:

(() => {
  'use strict'

  const forms = document.querySelectorAll('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {

      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')

    }, false)
  })
})();

Este script hace tres cosas:

1. Detecta todos los formularios con la clase needs-validation
2. Comprueba si los campos son válidos
3. Añade la clase was-validated para mostrar los estilos visuales

6. Ejemplo completo

A continuación tienes un ejemplo funcional de validación con varios campos.

<form class="needs-validation" novalidate>

  <div class="mb-3">
    <label class="form-label">Nombre</label>
    <input type="text" class="form-control" required>
    <div class="invalid-feedback">El nombre es obligatorio</div>
  </div>

  <div class="mb-3">
    <label class="form-label">Correo</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">Introduce un correo válido</div>
  </div>

  <div class="mb-3">
    <label class="form-label">Contraseña</label>
    <input type="password" class="form-control" minlength="6" required>
    <div class="invalid-feedback">La contraseña debe tener al menos 6 caracteres</div>
  </div>

  <button class="btn btn-primary" type="submit">Crear cuenta</button>
</form>
<script>
(() => {
  'use strict'
  
  const forms = document.querySelectorAll('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {

      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')

    }, false)
  })
})();
</script>

7. Buenas prácticas

Para crear formularios de forma profesional es recomendable seguir algunas prácticas:

Usar validación del lado del servidor

La validación en el navegador mejora la experiencia del usuario, pero nunca debe reemplazar la validación en el servidor.

Mensajes claros

Los mensajes deben explicar exactamente qué ocurre:

La contraseña debe tener al menos 8 caracteres

Evita mensajes como:

Error en el campo

Validar mientras el usuario escribe

Una buena práctica moderna es validar los campos mientras el usuario escribe, en lugar de esperar al envío del formulario.

Esto mejora mucho la experiencia de uso.

<form class="needs-validation" novalidate>

  <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">Introduce un correo válido</div>
  </div>

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

<script>
(() => {
  const form = document.querySelector('.needs-validation');
  const email = form.querySelector('#email');

  // Validación al escribir
  email.addEventListener('input', () => {
    if (email.checkValidity()) {
      email.classList.remove('is-invalid');
      email.classList.add('is-valid');
    } else {
      email.classList.remove('is-valid');
      email.classList.add('is-invalid');
    }
  });

  // Validación al enviar
  form.addEventListener('submit', e => {
    if (!form.checkValidity()) e.preventDefault();
    form.classList.add('was-validated');
  });
})();
</script>