Componentes de Bootstrap

Validación

Cómo un formulario dice que algo está bien o mal: el estado del campo y un mensaje que dice qué hacer.

Un campo con error cambia su borde y muestra un mensaje debajo. El color es un refuerzo: lo que dice al usuario qué falla y cómo arreglarlo es el mensaje.

Cuándo usarlo

Úsalo

is-invalid con un invalid-feedback que diga qué hacer (“Escribe un email válido”).
Validar al salir del campo o al enviar, no en cada tecla.
is-valid solo cuando confirmar ayuda (un nombre corto libre); no marques todos los campos.
Enlaza el mensaje con aria-describedby.

No

Mostrar el estado solo con color.
Escribir “Valor no válido” o un código de error.
Borrar lo que el usuario escribió cuando está mal.
Mostrar el mensaje lejos del campo.

Anatomía

Un campo con error tiene su control con la clase de estado y, debajo, el mensaje (invalid-feedback), en el mismo grupo que la etiqueta. Las casillas muestran el mensaje bajo su etiqueta.

Variantes y estados

Válido e inválido

Campo de texto inválido

ReposoHoverFocoDesactivado

invalid

Campo de texto válido

ReposoHoverFocoDesactivado

valid

Combinaciones

Combinación	Para qué usarla
Campo × inválido	El borde y el mensaje pasan a peligro; el campo conserva lo que escribió el usuario.
Campo × válido	Solo donde confirmar ayuda (un nombre corto libre, un código que existe).
Casilla × inválida	El mensaje va bajo la etiqueta de la casilla, y la etiqueta toma el color de peligro.
Formulario × resumen	En un formulario largo, lista los errores arriba con enlaces a los campos y mueve el foco al primero.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El mensaje es pequeño, de peso medio y del color del estado	Se lee como parte del campo, del mismo color que el borde, y no parece texto de cuerpo.
El borde cambia y el anillo sigue al estado	Incluso en un formulario lleno de texto, el campo con error es el que destaca, y el foco conserva el color del error.
Los mensajes quedan pegados bajo el campo	El mensaje pertenece a un campo; lejos se convierte en un aviso general.

Clases

Clase	Qué hace
`is-invalid`, `is-valid`	Estado de un control
`invalid-feedback`, `valid-feedback`	Mensaje bajo el control; se muestra cuando el control tiene el estado
`was-validated`	En el formulario: los estados siguen la validación del propio navegador

En esta versión

Bootstrap 5.3 dibuja el foco como un anillo suave y guarda cada color en variables CSS (--bs-*), así que un tema recolorea un control con una sola variable. El mensaje es el hermano que sigue al control.

Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos. El mensaje es el hermano que sigue al control.

Accesibilidad

El mensaje es texto, no solo un color o un icono.
aria-invalid="true" en un campo con error.
Tras enviar, mueve el foco al primer error.
Un resumen al principio de un formulario largo lista los errores con enlaces a los campos.