HomeCasa Prompts

Formulario en React con validación accesible (React Hook Form + Zod)

Genera un formulario React con esquema de validación, mensajes de error accesibles, envío seguro, errores del servidor por campo y una lista de pruebas para validarlo. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.

Intermedio · Código · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como desarrollador frontend sénior especializado en formularios accesibles y validación robusta en React.

Contexto:
- Campos y reglas: {{campos}}
- Qué ocurre al enviar: {{envio}}
- Librería: {{libreria}}
- Estilos: {{estilos}}
- Idioma de los mensajes de error: {{idioma_mensajes}}

Si falta algo clave (formato de error del servidor, campos opcionales, reglas condicionales), pregúntame antes de escribir código.

Entregables:
1. El esquema de validación tipado (con {{libreria}}), con mensajes claros que digan cómo corregir el error, y cómo reutilizarlo en el servidor.
2. El componente del formulario en TypeScript: etiquetas visibles asociadas a cada campo, `aria-invalid`, `aria-describedby` hacia el mensaje de error y el texto de ayuda, y foco en el primer campo con error al enviar.
3. Momento de validación razonable: no mostrar errores mientras el usuario aún no ha salido del campo, y revalidar al corregir.
4. Estado de envío: botón deshabilitado o con indicador mientras se envía, prevención de doble envío, mensaje de éxito anunciado con una región `aria-live`.
5. Errores del servidor: cómo asignarlos al campo correspondiente o mostrarlos como error general.
6. Una lista de casos de prueba (manuales o automatizados) que incluya teclado y lector de pantalla.

Restricciones:
- La validación en cliente es comodidad, no seguridad: recuérdalo e indica qué validar siempre en el servidor.
- No registres en consola datos personales ni contraseñas.
- No inventes endpoints: usa [COMPLETAR] si no los conozco.
- Usa los atributos `autocomplete` e `inputmode` adecuados.

Formato: un bloque de código por archivo con su nombre y una explicación breve de cada decisión.

Cómo usarlo

  1. Enumera los campos con sus reglas reales (obligatorio, longitud, formato). 2. Indica a qué endpoint o Server Action se envía. 3. Pega el código, prueba el formulario solo con teclado y pide ajustes concretos.

Ejemplo de uso

Campos: nombre (obligatorio), email (válido), teléfono (opcional, formato español), mensaje (20-1000 caracteres) · Envío: POST /api/contacto · Librería: React Hook Form + Zod · Estilos: Tailwind CSS.

Resultado de ejemplo

1. Esquema compartido (contactoSchema.ts)

import { z } from 'zod';

const telefonoES = /^(\+34\s?)?[6-9]\d{2}\s?\d{3}\s?\d{3}$/;

export const contactoSchema = z.object({
  nombre: z.string().trim().min(1, 'Escribe tu nombre'),
  email: z.string().trim().email('Escribe un email válido, por ejemplo nombre@dominio.es'),
  telefono: z
    .string()
    .trim()
    .regex(telefonoES, 'Escribe un teléfono español de 9 cifras, por ejemplo 612 345 678')
    .or(z.literal('')),
  mensaje: z
    .string()
    .trim()
    .min(20, 'El mensaje debe tener al menos 20 caracteres')
    .max(1000, 'El mensaje no puede superar los 1000 caracteres'),
  privacidad: z.literal(true, {
    errorMap: () => ({ message: 'Debes aceptar la política de privacidad para continuar' }),
  }),
});

export type ContactoInput = z.infer<typeof contactoSchema>;

El mismo esquema se importa en /api/contacto con contactoSchema.safeParse(body): la validación del cliente es comodidad, la del servidor es la que protege. En el formulario se usa zodResolver(contactoSchema) con mode: 'onTouched', y cada campo lleva aria-invalid y aria-describedby apuntando a su error…

Datos clave

Categoría
Programación y desarrollo · React
Tipo de resultado
Código
Nivel
Intermedio
Pensado para
ChatGPT, Claude, Gemini y Microsoft Copilot
Verificado en
Pendiente de verificación editorial
Variables
Campos y reglas, Qué ocurre al enviar, Librería, Estilos y Idioma de los mensajes
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Por qué validar también en el servidor si ya valido en el cliente?

Porque cualquiera puede saltarse el navegador y enviar datos directamente a tu API. La validación en cliente mejora la experiencia; la del servidor protege los datos.

¿Qué hace accesible un mensaje de error?

Que esté asociado al campo con aria-describedby, que el campo se marque con aria-invalid, que el texto explique cómo corregirlo y que el foco se lleve al primer error al enviar.

¿Puedo usarlo sin React Hook Form?

Sí. Elige otra librería o «sin librería» en la variable correspondiente y el prompt adapta el esquema y la gestión del estado.

¿Para qué sirve este prompt?

Genera un formulario React con esquema de validación, mensajes de error accesibles, envío seguro, errores del servidor por campo y una lista de pruebas para validarlo.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Campos y reglas, Qué ocurre al enviar, Librería, Estilos y Idioma de los mensajes). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados