HomeCasa Prompts

Formulário em React com validação acessível (React Hook Form + Zod)

Gere um formulário React com esquema de validação, mensagens de erro acessíveis, envio seguro, erros do servidor por campo e uma lista de testes para o verificar. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Código · Pendente de revisão editorial

Pensado para:

Prompt

Atua como programador frontend sénior especializado em formulários acessíveis e validação robusta em React.

Contexto:
- Campos e regras: {{campos}}
- O que acontece ao enviar: {{envio}}
- Biblioteca: {{biblioteca}}
- Estilos: {{estilos}}
- Idioma das mensagens de erro: {{idioma_mensagens}}

Se faltar algo importante (formato de erro do servidor, campos opcionais, regras condicionais), pergunta-me antes de escreveres código.

Entregáveis:
1. O esquema de validação tipado (com {{biblioteca}}), com mensagens claras que expliquem como corrigir o erro, e como reutilizá-lo no servidor.
2. O componente do formulário em TypeScript: etiquetas visíveis associadas a cada campo, `aria-invalid`, `aria-describedby` para a mensagem de erro e o texto de ajuda, e foco no primeiro campo com erro ao enviar.
3. Momento de validação sensato: sem erros enquanto o utilizador ainda não saiu do campo e revalidação enquanto corrige.
4. Estado de envio: botão desativado ou com indicador, prevenção de duplo envio e mensagem de sucesso anunciada numa região `aria-live`.
5. Erros do servidor: como associá-los ao campo certo ou mostrá-los como erro geral.
6. Uma lista de casos de teste (manuais ou automáticos), incluindo uso só com teclado e leitor de ecrã.

Restrições:
- A validação no cliente é conveniência, não segurança: lembra-o e indica o que validar sempre no servidor.
- Nunca registes dados pessoais nem palavras-passe na consola.
- Não inventes endpoints: usa [PREENCHER] se não os indiquei.
- Usa os atributos `autocomplete` e `inputmode` adequados.

Formato: um bloco de código por ficheiro com o respetivo nome e uma breve explicação de cada decisão.

Como utilizar

  1. Enumera os campos com as regras reais (obrigatório, comprimento, formato). 2. Indica que endpoint ou Server Action recebe os dados. 3. Cola o código, testa o formulário só com o teclado e pede ajustes concretos.

Exemplo de utilização

Campos: nome (obrigatório), email (válido), telefone (opcional, formato português), mensagem (20-1000 caracteres) · Envio: POST /api/contacto · Biblioteca: React Hook Form + Zod · Estilos: Tailwind CSS.

Exemplo de resultado

1. Esquema partilhado (contactoSchema.ts)

import { z } from 'zod';

const telefonePT = /^(?:\+351\s?)?[29]\d{2}\s?\d{3}\s?\d{3}$/;

export const contactoSchema = z.object({
  nome: z.string().trim().min(1, 'Escreva o seu nome'),
  email: z.string().trim().email('Escreva um email válido, por exemplo nome@dominio.pt'),
  telefone: z
    .string()
    .trim()
    .regex(telefonePT, 'Escreva um número português de 9 dígitos, por exemplo 912 345 678')
    .or(z.literal('')),
  mensagem: z
    .string()
    .trim()
    .min(20, 'A mensagem deve ter pelo menos 20 caracteres')
    .max(1000, 'A mensagem não pode ultrapassar os 1000 caracteres'),
  privacidade: z.literal(true, {
    errorMap: () => ({ message: 'Tem de aceitar a política de privacidade para continuar' }),
  }),
});

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

Este mesmo esquema é importado em /api/contacto com contactoSchema.safeParse(body): a validação no cliente é conveniência, a do servidor é a que protege. No formulário usa-se zodResolver(contactoSchema) com mode: 'onTouched', e cada campo leva aria-invalid e aria-describedby a apontar para o respetivo erro…

Dados-chave

Categoria
Programação e desenvolvimento · React
Tipo de resultado
Código
Nível
Intermédio
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
Campos e regras, O que acontece ao enviar, Biblioteca, Estilos e Idioma das mensagens
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Porquê validar no servidor se já valido no navegador?

Porque qualquer pessoa pode contornar o navegador e enviar dados diretamente para a tua API. A validação no cliente melhora a experiência; a do servidor protege os dados.

O que torna uma mensagem de erro acessível?

Estar ligada ao campo com aria-describedby, o campo ter aria-invalid, o texto explicar como corrigir e o foco ir para o primeiro erro ao enviar.

Posso usá-lo sem React Hook Form?

Sim. Escolhe outra biblioteca ou «sem biblioteca» na variável e o prompt adapta o esquema e a gestão do estado.

Para que serve este prompt?

Gere um formulário React com esquema de validação, mensagens de erro acessíveis, envio seguro, erros do servidor por campo e uma lista de testes para o verificar.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Campos e regras, O que acontece ao enviar, Biblioteca, Estilos e Idioma das mensagens). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados