Diseno e implementacion de validacion de formularios con Claude Code

Deje que Claude Code se encargue del diseno de validacion de formularios

La validacion de formularios es una funcionalidad poco vistosa pero critica. Patrones de entrada faltantes y mensajes de error inconsistentes son problemas comunes, y la implementacion manual consume tiempo. Con Claude Code, puede generar todo de manera consistente, desde definiciones de esquemas Zod hasta componentes de UI.

Generacion de esquemas Zod

Creemos un esquema de validacion para un formulario de registro de usuario.

> Crea un esquema de validacion Zod para un formulario de registro.
> Incluye nombre, email, contrasena, confirmar contrasena, edad y aceptacion de terminos.
> Usa mensajes de error en espanol.

import { z } from "zod";

export const registerSchema = z
  .object({
    name: z
      .string()
      .min(1, "Por favor ingrese su nombre")
      .max(50, "El nombre debe tener 50 caracteres o menos"),
    email: z
      .string()
      .min(1, "Por favor ingrese su correo electronico")
      .email("Por favor ingrese un correo electronico valido"),
    password: z
      .string()
      .min(8, "La contrasena debe tener al menos 8 caracteres")
      .regex(/[A-Z]/, "Debe contener al menos una letra mayuscula")
      .regex(/[a-z]/, "Debe contener al menos una letra minuscula")
      .regex(/[0-9]/, "Debe contener al menos un numero"),
    confirmPassword: z.string().min(1, "Por favor confirme su contrasena"),
    age: z
      .number({ invalid_type_error: "La edad debe ser un numero" })
      .min(13, "Debe tener al menos 13 anos")
      .max(120, "Por favor ingrese una edad valida"),
    agreement: z.literal(true, {
      errorMap: () => ({ message: "Debe aceptar los terminos de servicio" }),
    }),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Las contrasenas no coinciden",
    path: ["confirmPassword"],
  });

export type RegisterFormData = z.infer<typeof registerSchema>;

Integracion con React Hook Form

Puede generar un componente que combine el esquema con React Hook Form de una sola vez.

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema, type RegisterFormData } from "./schema";

export function RegisterForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<RegisterFormData>({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterFormData) => {
    const res = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) throw new Error("El registro ha fallado");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="name">Nombre</label>
        <input id="name" {...register("name")} />
        {errors.name && (
          <p className="text-red-500 text-sm">{errors.name.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="email">Correo electronico</label>
        <input id="email" type="email" {...register("email")} />
        {errors.email && (
          <p className="text-red-500 text-sm">{errors.email.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="password">Contrasena</label>
        <input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-red-500 text-sm">{errors.password.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="confirmPassword">Confirmar contrasena</label>
        <input
          id="confirmPassword"
          type="password"
          {...register("confirmPassword")}
        />
        {errors.confirmPassword && (
          <p className="text-red-500 text-sm">
            {errors.confirmPassword.message}
          </p>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Enviando..." : "Registrarse"}
      </button>
    </form>
  );
}

Validacion unificada en el servidor

Usar el mismo esquema Zod en el lado del servidor unifica la logica de validacion.

import { registerSchema } from "./schema";

// Uso en una ruta de API Express/Next.js
export async function POST(request: Request) {
  const body = await request.json();
  const result = registerSchema.safeParse(body);

  if (!result.success) {
    return Response.json(
      { errors: result.error.flatten().fieldErrors },
      { status: 400 }
    );
  }

  // Validacion exitosa - guardar en BD
  const user = await createUser(result.data);
  return Response.json({ user }, { status: 201 });
}

Agregando reglas de validacion con Claude Code

Agregar validacion a formularios existentes tambien es facil. Despues de la configuracion siguiendo la guia de inicio de Claude Code, simplemente solicite:

> Agrega un campo de codigo postal a src/components/ProfileForm.tsx.
> Acepta el formato 12345 o 12345-6789.
> Tambien agrega auto-formateo en tiempo real.

Claude Code entiende toda la estructura del formulario y agrega el nuevo campo de manera consistente con las reglas de validacion existentes. Para patrones de refactorizacion, consulte Automatizacion de refactorizacion.

Resumen

Con Claude Code, puede lograr un diseno consistente en poco tiempo, desde definiciones de esquemas Zod hasta la integracion con React Hook Form y validacion del lado del servidor. Agregar o cambiar reglas de validacion se realiza automaticamente manteniendo la consistencia con el codigo existente.

Para documentacion oficial, consulte Claude Code.