Como criar formulários com validação no React

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

Crie seu schema com Zod

Comece criando um arquivo chamado <code>signup.schema.ts</code> onde ficará a definição dos campos e validações do formulário. Use o objeto <code>z.object</code> para definir campos como <em>fullName</em> , <em>email</em> , <em>password</em> e <em>confirmPassword</em> .

Inferência de tipos com Zod

Exporte também o tipo usando <code>z.infer</code> 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 <code>useForm</code> passando o tipo inferido e configure o <code>resolver</code> com <code>zodResolver(schema)</code> para que sua validação e tipagem estejam conectadas.

Controlando campos com Controller

Para campos personalizados, utilize o componente <code>Controller</code> e mapeie os campos usando as propriedades <code>control</code> , <code>render</code> , e extraia os valores de <code>field</code> e <code>fieldState</code> .

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 <code>fieldState.error?.message</code> . Isso promove ótima experiência de usuário.

Conectando o envio dos dados

Utilize <code>handleSubmit(onSubmit)</code> 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 <code>min(5)</code> para nome ou senha e padronize a nomenclatura dos arquivos de schema usando o sufixo <code>.schema.ts</code> .

Renderizar feedback de erro

Mostre mensagens ao lado do campo usando o <code>error.message</code> , 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 <code>/schemas/signup.schema.ts</code> e o formulário como um componente reutilizável, por exemplo, <code>components/forms/SignUpForm.tsx</code> .

Estilizando inputs

Integre seu Design System dentro dos campos controlados no <code>render</code> , mantendo consistência visual e usabilidade no app.

Resetando formulários

Após envio bem-sucedido, use o método <code>reset()</code> vindo do <code>useForm</code> 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.

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