Paso 1: Crear el Contenedor y el Formulario
Primero, necesitamos crear un contenedor y dentro de él, un formulario. A este formulario le daremos la clase row y añadiremos el atributo novalidate para desactivar la validación automática del navegador.
<div class="container">
<form class="row g-3 needs-validation" novalidate>
<!-- Contenido del formulario -->
</form>
</div>Paso 2: Añadir los Campos del Formulario
Añadiremos varios campos al formulario, cada uno con su label e input. También incluiremos mensajes de feedback para la validación.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="name" required>
<div class="valid-feedback">¡Todo bien!</div>
<div class="invalid-feedback">Es necesario poner el nombre.</div>
</div>
<div class="col-md-6">
<label for="surname" class="form-label">Apellidos</label>
<input type="text" class="form-control" id="surname" required>
<div class="valid-feedback">¡Todo bien!</div>
<div class="invalid-feedback">Es necesario poner los apellidos.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">Acepto los términos y condiciones</label>
<div class="valid-feedback">¡Todo bien!</div>
<div class="invalid-feedback">Es necesario aceptar los términos.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Enviar</button>
</div>
</form>Paso 3: Añadir el Script de Validación
Para validar el formulario, necesitamos agregar un script que maneje la validación. Este script se puede encontrar en la documentación oficial de Bootstrap.
<script>
// Ejemplo de JavaScript para deshabilitar el envío del formulario si hay campos no válidos
(function() {
'use strict';
window.addEventListener('load', function() {
// Obtener todos los formularios a los que queremos aplicar estilos de validación Bootstrap personalizados
var forms = document.getElementsByClassName('needs-validation');
// Bucle sobre ellos y prevenir el envío
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>Explicación del Script
Este script:
Desactiva el envío del formulario si hay campos no válidos.
Añade la clase
was-validatedal formulario después de intentar enviarlo, para que los estilos de validación se apliquen.
Opción de Validación con Tooltips
Si prefieres mostrar los mensajes de validación como tooltips, puedes cambiar las clases de feedback y añadir la clase position-relative a las columnas.
Cambiar las Clases de Feedback
Cambia valid-feedback e invalid-feedback por valid-tooltip e invalid-tooltip.
<div class="col-md-6 position-relative">
<label for="name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="name" required>
<div class="valid-tooltip">¡Todo bien!</div>
<div class="invalid-tooltip">Es necesario poner el nombre.</div>
</div>Añadir position-relative a las Columnas
Añade position-relative a las columnas para que los tooltips se posicionen correctamente.
<div class="col-md-6 position-relative">
<!-- Contenido del campo -->
</div>Conclusión
Hemos aprendido cómo validar formularios con Bootstrap 5, usando tanto feedback estándar como tooltips. Esto mejora la experiencia del usuario y asegura que los datos enviados sean correctos.
