Validación integrada y errores UX

1) Principios

1. Ayuda predictiva, no castigo. Mostramos cómo introducir correctamente, antes del error.
2. No perder datos. Cualquier error no destruye lo introducido; mantenemos «Cancelar «/» Repetir ».
3. El momento de la exhibición.

Antes de escribir: helper text (reglas y ejemplos).
Durante: hints blandos/máscara/sustitución automática.
Después (blur/submit): error claro con la instrucción «cómo corregir».
4. Ahorro de atención. Un mensaje es una causa y una acción.
5. Disponibilidad. Texto + icono/color, comunicación con el campo a través de ARIA, enfoque al primer campo erróneo.

2) Capas de validación

Sincronizado del cliente: formato, longitud, obligatoriedad, máscara. Rápido y barato.
Asincrónico del cliente: unicidad de inicio de sesión, comprobación de BIN/IBAN, API-sugerencia. Con debouns.
Servidor: reglas de negocio, límites, puntuación de riesgo, autorización/derechos. La verdad de última instancia.
Regla: incluso con una comprobación de cliente perfecta, el servidor confirma y forma el texto final.

3) Timings y debouns

Validación en blur → fidback instantáneo ≤ 100 ms.
Verificación asíncrona - Debauns 250-400 ms después de detener la entrada.
La confirmación de éxito es concisa («Ok») o un icono verde; sin «saludos».
En 'submit' mostramos una lista de errores y llevamos el foco a la primera.

js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}

4) Redacción de errores

Plantilla: la razón → cómo corregir → alternativa (si la hay).

Bueno: "La contraseña es más corta que 8 caracteres. Agregue más caracteres o utilice la frase".
Bien: "IBAN se ve incorrecto. Compruebe la longitud y los caracteres: A-Z, 0-9".
Mal: «Entrada incorrecta».
No culpe al usuario; evite la jerga y los códigos.
En las zonas sensibles (pagos/CUS) evitamos los detalles que revelan la seguridad.

5) Patrones de presentación de mensajes

5. 1 En campo (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Brevemente, específicamente; sin párrafos largos.
Color + icono, pero el significado está en el texto.

5. 2 Debajo del formulario (resumen)

Lista de todos los errores con anclajes a los campos.
El botón Ir a error/clic en el elemento transfiere el enfoque.

5. 3 Durante el proceso de envío

Bloqueamos la pulsación repetida (state 'busy').
Con un tiempo de espera de 3-5 s - «Esperamos confirmación»... con una repetición segura.

6) Máscaras, consejos automáticos y correctores

Las máscaras no deben interferir con la inserción/edición. Permita la entrada libre, normalice bajo el capó.
Consejos automáticos: muestre ejemplos de formatos, placeholder como sugerencia y no como parte «obligatoria».
Normalización: trimming de espacios, unificación de registros, formato automático (por ejemplo, '+ 1 (___) ___ - ____') - pero en los datos originales, guarde la versión «limpia».

7) Accesibilidad (A11y)

Comunicación: 'label' ↔ 'input', errores en 'aria-describedby'.
Los críticos son 'role =' alert ', los informativos son' role = 'status'.
Volvemos el foco al campo erróneo, ': focus-visible' ver.
Contraste de texto/iconos ≥ AA; el significado no depende sólo del color.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>

8) Formatos y localización internacionales

Nombres/direcciones: permite diferentes alfabetos, longitudes, apóstrofos, guiones.
Fechas/monedas/números: utilice formatos de entrada locales y estructuras de almacenamiento internas estrictas (ISO/número de centavos).
Teléfono: entrada en formato internacional '+ CC', pista de coche por país.
El lenguaje de los mensajes: corto, culturalmente neutro; marcando el + 20-30% de la longitud de la fila.

9) Seguridad y privacidad

No muestre que la cuenta existe/no existe - texto general: «Si el correo electrónico está registrado, enviaremos un correo electrónico».
Enmascarar datos sensibles (PAN, pasaporte).
En pasos críticos (tasa/pago), use idempotencia y «repeticiones seguras».
Registros - con el ID de correlación sin PII en los mensajes.

10) Mantener el progreso

Autocompletar el borrador (local/en el servidor).
Si se produce un error de envío: el formulario permanece lleno; se ofrece una repetición más tarde.
Con procesos de pasos múltiples (KYC): guarde los pasos completados.

11) Validación asíncrona

Debowns 250-400 ms; mostramos «verificamos»... cerca del campo, sin bloquear toda la pantalla.
Una clara indicación de éxito/fracaso sin «tirones» de la maqueta.
Tiempo de espera de la red → "No se pudo verificar. ¿Continuar con el riesgo?" (si es admisible) o'Repetir ".

js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);

12) Formularios de pago y KYC (específico)

Mapas: formato PAN, fecha límite, CVC - validación a medida que se introduce; errores - sin revelar el motivo del rechazo por parte del banco.
A2A/monederos: verificación de la admisibilidad para el país/límites, textos claros sobre comisiones/plazos.
KYC: requisitos paso a paso para fotos/documentos, vista previa, tamaño/tipo de archivo, plazos de verificación, privacidad.
Juego responsable: los mensajes son neutrales, con acciones «Establecer límite «/« Ayudar ».

13) Antipatternas

Mostrar errores «en cada símbolo» sin debauns.
Restablece el formulario en caso de error.
Mensaje de entrada incorrecto sin especificar el campo/regla.
Información crítica sólo en color/icono.
Bloquea toda la página para verificar un campo.
No hay modo offline ni repeticiones en las fallas de red.

14) Tokens del sistema de diseño (ejemplo)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) Snippets de implementación

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)          "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}

ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));

16) Métricas y controles

Time-to-Fix (tiempo desde el error hasta la corrección).
Error rate por campos y por razones (formato/límites/servidor).
Reenviar (retry success rate).
Proporción de formas abandonadas y profundidad del paso.
Relleno de consejos: CTR «Más información», frecuencia de ocultación de consejos.

17) Lista de comprobación de QA

A11y

• El foco va al primer campo equivocado; 'aria-describedby '/' aria-invalid' se exponen.
• Contraste ≥ AA; los mensajes no dependen únicamente del color.

Comportamiento

• Validación incorporada con debouns; los errores no aparecen antes de blur (excepto las máscaras críticas).
• En submit se forma un resumen, los campos no se borran.
• Las comprobaciones asíncronas no bloquean la página; hay un tiempo de espera y una repetición.

Texto

• Causa + Cómo corregir; sin código/culpa.
• La localización no rompe el diseño; los ejemplos son relevantes.

Seguridad

• No hay filtraciones de PII en los mensajes; no revelamos la existencia de una cuenta.
• Idempotencia para operaciones críticas.

18) Documentación en el sistema de diseño

Componentes: 'FieldError', 'FormSummary', 'HelperText',' BusyButton '.
Mapas de reglas para campos típicos (correo electrónico, teléfono, contraseña, dirección, IBAN, fecha).
Gaids por debouns, verificación asíncrona y comportamiento fuera de línea.
Plantillas de texto para errores frecuentes y ejemplos «antes/después».

Resumen breve

La validación incorporada es sobre la ayuda predictiva, instrucciones claras y una actitud cuidadosa hacia los datos. Compruebe localmente y en el servidor, muestre errores en el momento adecuado con acciones específicas, respete la disponibilidad y privacidad, mantenga el progreso y use debouns. Así las formas se vuelven amigables, y los errores se vuelven rápidos y corregibles.