Como criar formulários com validação no React
Construa formulários robustos com React Hook Form e Zod no seu app React Native
Por que isso é importante
Como criar formulários com validação no React. Construa formulários robustos com React Hook Form e Zod no seu app React Native
Visão geral da stack de formulários
Vamos usar React Hook Form para gerenciar estado e lógica do formulário, e Zod para
definir e validar o esquema com segurança de tipos no TypeScript.
Instalação das dependências necessárias
- Passo 1: Instale o React Hook Form:
npm install react-hook-form - Passo 2: Instale o Zod:
npm install zod - Passo 3: Instale o hookform-resolvers:
npm install @hookform/resolvers
Crie seu schema com Zod
Comece criando um arquivo chamado signup.schema.ts onde ficará a definição
dos campos e validações do formulário. Use o objeto z.object para definir
campos como fullName , email , password e confirmPassword .
Atenção
Use a função refine para validar campos interdependentes como senha e
confirmação de senha.
Inferência de tipos com Zod
Exporte também o tipo usando z.infer com base no seu schema. Isso garantirá
que o formulário use o shape correto e melhore a inteligência do TypeScript.
Configurando o useForm
Importe e chame o hook useForm passando o tipo inferido e configure o resolver com zodResolver(schema) para que sua validação e
tipagem estejam conectadas.
Controlando campos com Controller
Para campos personalizados, utilize o componente Controller e mapeie os
campos usando as propriedades control , render , e extraia os
valores de field e fieldState .
Dica de usabilidade
Adapte o teclado com keyboardType e o comportamento de capitalização com autoCapitalize conforme o tipo do campo (nome, email, etc).
Validação visual em tempo real
O Zod permite mensagens customizadas nos erros, e o React Hook Form exibe os erros nos
campos renderizados com fieldState.error?.message . Isso promove ótima
experiência de usuário.
Conectando o envio dos dados
Utilize handleSubmit(onSubmit) com um botão para submeter o formulário. A
função onSubmit só será chamada se todas as validações do Zod forem cumpridas.
Diferenças fundamentais com outros métodos
Com essa abordagem, não é necessário manter estado manual de cada campo. A integração
entre React Hook Form e Zod faz todo o controle e ainda oferece tipagem estática.
Boas práticas ao definir schemas
Defina mensagens claras, use validações mínimas como min(5) para nome ou
senha e padronize a nomenclatura dos arquivos de schema usando o sufixo .schema.ts .
Renderizar feedback de erro
Mostre mensagens ao lado do campo usando o error.message , promovendo
acessibilidade e clareza ao usuário no que precisa ser corrigido.
Reutilização do schema
Como o schema tem tipo inferido, ele pode ser reutilizado tanto na validação quanto em
chamadas de APIs, garantindo consistência no formato dos dados.
Organizando o projeto
Mantenha o schema em uma pasta separada como /schemas/signup.schema.ts e o
formulário como um componente reutilizável, por exemplo, components/forms/SignUpForm.tsx .
Estilizando inputs
Integre seu Design System dentro dos campos controlados no render , mantendo
consistência visual e usabilidade no app.
Resetando formulários
Após envio bem-sucedido, use o método reset() vindo do useForm para limpar os campos e feedbacks.
Melhorando a escala com múltiplos schemas
Crie schemas independentes para cada tipo de formulário: login, feedback, registro, etc.
E compartilhe resolvers e tipos em todo o app.
Alerta de erro comum
Raramente, erros de validação múltiplos podem não aparecer nos campos separados. Use path dentro do refine para apontar corretamente.
Conclusão e próximos passos
Com React Hook Form e Zod você estrutura formulários escaláveis, validáveis e com
segurança de tipos. Explore visualizações customizadas, máscaras de input e integrações
com backend.
Ferramentas utilizadas
Checklist de Implementação
- Instalou todas as bibliotecas necessárias
- Criou o schema Zod com validações
- Configurou o useForm com zodResolver
- Mapeou campos usando Controller
- Exibiu mensagens de erro corretamente
- Conectou o schema com tipos reutilizáveis
- Testou a submissão e reset dos campos