Ayuda y validación.
La validación evita errores cuando puede y explica cómo corregirlos cuando ocurren.
Cuándo usar
La validación evita errores cuando puede y explica cómo corregirlos cuando ocurren.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Resumen de errores |
| 2 | Campo |
| 3 | Mensaje |
| 4 | Sugerencia |
| 5 | Foco posterior al envío |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| pristine | Ayuda preventiva |
| validating | Sólo si existe consulta asíncrona |
| warning | Valor permitido con consecuencia |
| invalid | Causa y corrección |
| valid | Confirmación sólo cuando aporta valor |
Accesibilidad
- El servidor es autoridad final.
- El resumen enlaza cada campo.
- aria-describedby conecta ayuda y error.
- No validar agresivamente en cada tecla.
HTML de referencia
<div role="alert" tabindex="-1">
<h2>Corrige 1 campo</h2>
<a href="#rut">Ingresa un RUT válido</a>
</div>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.