¿Debes validar un formulario crtico. Qué arqueitectura es más segura?

Cliente mejora experiencia; servidor garantiza integridad y seguridad.

Formularios de producción: validación multicapa, UX y envío confiable

Construye formularios robustos de extremo a extremo con `submit`, `FormData`, validación declarativa por campo, feedback accesible y envío HTTP controlado con `fetch`.

¿Cuánto sabes de JavaScript?

📘 Teoría

Arquitectura de formulario: una sola entrada, varios pasos claros

Piensa en fases: capturar, validar, enviar y cerrar estado.

El punto de orquestación debe ser el evento `submit`: ahí decides si hay errores locales, si se puede enviar y cómo reaccionar a la respuesta del servidor.

Cuando cada campo valida por su cuenta sin coordinación central, aparecen comportamientos inconsistentes. Centralizar flujo evita ese caos.

Captura

Extraer datos desde el form.

FormData
Object.fromEntries

Normalización

Limpiar formatos antes de validar.

trim()
toLowerCase() en email

Validación

Reglas por campo con mensajes útiles.

required
longitud / formato

Envío

fetch + estado UI consistente.

botón deshabilitado
finally para limpieza

Captura de datos y normalización segura

Valida sobre datos limpios, no sobre texto crudo del input.

`FormData` permite leer todo el formulario de una vez. Después conviene normalizar: espacios, mayúsculas/minúsculas y tipos básicos.

Esta etapa evita falsos errores como emails con espacios o nombres vacíos con solo whitespace.

Normaliza antes de validar.
No mezcles lectura y render de errores en la misma función.
Conserva nombres de campo estables para backend y frontend.

FormData + normalización

function readForm(form) {
  const raw = Object.fromEntries(new FormData(form).entries());

  return {
    nombre: String(raw.nombre ?? '').trim(),
    email: String(raw.email ?? '').trim().toLowerCase(),
    password: String(raw.password ?? '')
  };
}

console.log(readForm(document.getElementById('registro')));

Validación declarativa por campo

Reglas en objeto + función genérica = escalabilidad.

A medida que crece el formulario, conviene evitar `if` gigantes. Un mapa de validadores por campo simplifica mantenimiento y pruebas.

Cada regla debe devolver un mensaje concreto. Si el campo es válido, devuelve string vacío.

Mapa de reglas reutilizable

const validators = {
  nombre: (v) => (!v ? 'El nombre es obligatorio' : v.length < 2 ? 'Mínimo 2 caracteres' : ''),
  email: (v) => (!v.includes('@') ? 'Email inválido' : ''),
  password: (v) => (v.length < 8 ? 'Mínimo 8 caracteres' : '')
};

function validate(values) {
  const errors = {};

  for (const [field, rule] of Object.entries(validators)) {
    const msg = rule(values[field] ?? '');
    if (msg) errors[field] = msg;
  }

  return errors;
}

Feedback accesible y contextual

El usuario debe saber qué corregir y dónde.

Mostrar errores junto al campo reduce fricción. Además, conviene usar `aria-invalid` y vincular mensajes con `aria-describedby` para soporte asistivo.

Evita un único mensaje global genérico cuando hay varios campos inválidos: aporta contexto específico.

Pintar y limpiar errores por campo

function showFieldError(input, errorEl, msg) {
  input.classList.add('invalid');
  input.setAttribute('aria-invalid', 'true');
  errorEl.textContent = msg;
}

function clearFieldError(input, errorEl) {
  input.classList.remove('invalid');
  input.setAttribute('aria-invalid', 'false');
  errorEl.textContent = '';
}

Submit con fetch resiliente

Valida primero, luego envía, y siempre restaura estado en `finally`.

En envío remoto, deshabilita el botón para evitar doble submit y comunica estado (`enviando`, `error`, `éxito`) de forma explícita.

En errores de servidor, evita ocultar detalles útiles: muestra mensaje amable al usuario y log técnico en consola para diagnóstico.

Patrón completo de envío

async function submitForm(values, ui) {
  ui.button.disabled = true;
  ui.status.textContent = 'Enviando...';

  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(values)
    });

    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const data = await res.json();
    ui.status.textContent = `Enviado ✅ (#${data.id})`;
  } catch (error) {
    ui.status.textContent = 'No se pudo enviar. Intenta de nuevo.';
    console.error('submitForm()', error.message);
  } finally {
    ui.button.disabled = false;
  }
}

1 Arquitectura de formulario: una sola entrada, varios pasos claros 2 Captura de datos y normalización segura 3 Validación declarativa por campo 4 Feedback accesible y contextual 5 Submit con fetch resiliente

🧪 Aprende probando

Ejemplo Ejemplo guiado: normalizar payload antes de validar Convierte `FormData` en objeto limpio para trabajar reglas y reducir errores por formato.

⌄

Ejemplo Ejemplo guiado: mapa de validadores reutilizable Centraliza reglas por campo para evitar condicionales enormes en el submit.

⌄

Ejemplo Demo interactiva: formulario pro con validación y envío Prueba errores por campo, estado de envío y salida final del payload normalizado en un laboratorio completo.

⌄

🏁 Retos

Reto Reto 1: interceptar submit y construir objeto normalizado Lee datos con `FormData`, normaliza nombre y email, y muestra el objeto final por consola.

⌄

Reto Reto 2: validar y cortar envío con feedback local Valida nombre y contraseña; si hay errores, muestra mensaje y usa `return` para frenar el flujo antes de enviar.

⌄

🧰 Recursos

Enlaces útiles

MDN: The form element javascript.info: Forms and controls web.dev: Learn Forms MDN: FormData MDN: Constraint validation MDN: HTMLFormElement.checkValidity

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 30

Canvas 2D con JavaScript: dibujar datos en un lienzo

Lección 32

Persistencia en navegador: localStorage y sessionStorage

›