Marc Semper Lloret
← Servidor web y API con Node

Sesión 12 · Semana 4

Formularios de extremo a extremo

Hoy · Hoja de ruta

  1. 1. Aprende: El recorrido completo de un envío, desde el campo hasta el fichero y de vuelta.
  2. 2. Haz: Un formulario que crea un producto de verdad.
  3. 3. Comprueba: Los errores del servidor aparecen junto al campo que los causó.

Antes de empezar · 5 minutos, sin apuntes

  1. Enumera todo lo que ocurre entre pulsar «Enviar» y ver el resultado.
  2. ¿Qué pasa si se pulsa dos veces seguidas?
  3. ¿Dónde deben aparecer los errores que devuelve el servidor?

El recorrido completo

De un campo al fichero y de vuelta
  1. Se envía el formulario; se cancela el comportamiento por defecto
  2. Se leen y convierten los valores
  3. Validación del cliente: si falla, no se envía nada
  4. Petición POST con el cuerpo JSON
  5. El servidor valida otra vez y responde 201 o 400
  6. Con 201: se actualiza el estado y se vuelve a pintar
  7. Con 400: se muestran los detalles junto a cada campo
formulario.addEventListener("submit", async (evento) => {
  evento.preventDefault();
  limpiarErrores();
  boton.disabled = true;

  try {
    const creado = await pedir("/api/productos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(formulario)))
    });

    estado.productos.push(creado);
    formulario.reset();
    anunciar(`${creado.nombre} añadido`);
    actualizar();
  } catch (error) {
    if (error.detalles?.length) mostrarErroresDeCampo(error.detalles);
    else anunciar(error.mensaje, "error");
  } finally {
    boton.disabled = false;
  }
});

Los detalles del servidor, en su campo

function mostrarErroresDeCampo(detalles) {
  for (const { campo, mensaje } of detalles) {
    const control = formulario.elements[campo];
    if (control) mostrarError(control, mensaje);
  }
  formulario.elements[detalles[0].campo]?.focus();
}

El campo de la respuesta es lo que hace esto posible

Por eso el contrato de errores incluye campo en cada detalle: sin él, el cliente solo puede enseñar un mensaje suelto y quien lo lee tiene que adivinar cuál de los seis campos está mal.

Aquí se ve para qué servía diseñar el contrato antes de escribir la primera ruta.

Dos detalles que se olvidan siempre

Deshabilitar el botón mientras se envía evita el doble envío, que con POST crea dos productos. Anunciar además el resultado en la región activa de la UD4 consigue que el éxito no sea solo un cambio visual que algunas personas no perciben.

Tarea 12 · El formulario real

  1. Añade el formulario de alta a tu página, con su marcado accesible.
  2. Envía con fetch y trata las dos respuestas posibles.
  3. Muestra los errores del servidor en su campo y lleva el foco al primero.
  4. Deshabilita el botón durante el envío.
  5. Anuncia el resultado en la región activa.
  6. Añade el borrado desde la lista, con confirmación.
Objetivo mínimoAlta funcionando de punta a punta con errores en su campo.
Si lo tienesAñade la edición reutilizando el mismo formulario.
RetoActualiza la lista de forma optimista y deshaz el cambio si el servidor rechaza.

Cierre de la semana 4

  • La primera carga llega generada del servidor.
  • El cliente consume su propia API.
  • Los formularios crean y borran datos reales.
  • Los errores del servidor llegan al campo correcto.
Ver respuestas

1 · Que se envíe dos veces y se creen dos productos.

2 · Junto al campo que los provoca, gracias al campo campo del contrato.

3 · Deshabilitar el botón mientras dura el envío.

Microprueba semanal 4 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Escribe qué hace la función de escapado y qué ocurre si falta.
  2. ¿Cuándo filtrarías en el cliente y cuándo en el servidor?
  3. ¿Por qué el contrato de errores incluye el nombre del campo que falla?
---