Formulário Dinâmico com React Hook Form e Zod
Fazer um formulário na vida real nem sempre é uma tarefa trivial. Nuances como validação, mensagens de erro e máscaras de preenchimento tornam o processo um pouco menos intuitivo. Neste Mini Projeto, você vai aprender a criar um formulário de cadastro dinâmico usando React Hook Form e Zod para facilitar o desenvolvimento.
React Hook Form e Zod são, respectivamente, as principais ferramentas da indústria para gerenciamento de formulários no React e validação client e server side.
O formulário de cadastro terá como funcionalidades:
- Validação e erros diretamente no cliente
- Validação e erros provenientes do servidor
- Botão para esconder/revelar senha
- Preenchimento automático de endereço e cidade de acordo com o CEP
- Máscara para telefone celular, CPF e CEP
Tudo isso usando React, React Hook Forms e Zod.
O design e a UI do front-end já estão implementados em um projeto Vite! O objetivo aqui é conseguir fazer as funcionalidades do formulário, bem como aprender as bibliotecas React Hook Form e Zod.
Para isso, basta fazer um fork, clonar o código para a sua máquina, instalar as dependências e rodar pnpm run dev ou npm run dev!
O seu formulário deverá ser submetido para uma API desenvolvida por nós. O endpoint está em https://apis.codante.io/api/register-user/register. Esta API irá retornar um código 200 se todos os dados estiverem corretos; ou um 422 caso haja algum erro de validação. Você deverá implementar em seu código também as mensagens de validação retornadas pelo servidor.
A documentação da API está em https://apis-docs.codante.io/register-user. Será necessário consultá-la para fazer este Mini Projeto.
Botão para esconder / revelar senha
- Crie um botão que, ao clicar, revele ou esconda as senhas diretamente no formulário.
- Este botão deverá ser um ícone que represente que a senha está escondida ou revelada (no código já há uma sugestão de ícone).
- O botão deve possuir, no mínimo, a acessibilidade de ser ativado via teclado (deve ser possível navegar até ele usando a tecla
tab).
Máscara de telefone, CPF e CEP
- Implemente, do zero ou usando uma biblioteca, uma máscara para os inputs de
telefone, cpf e cep.
- Uma sugestão para as máscaras é, respectivamente,
(00) 00000-0000, 000.000.000-27 e 00000-000.
Preenchimento automático de Endereço (rua) e Cidade após preenchido o CEP
- Após preenchido o CEP, busque em alguma API de CEP os dados de logradouro e cidade.
- Preencha os inputs de endereço e cidade com os dados retornados.
Note
Antes de implementar sua solução, pense em qual será o melhor evento para ser escutado neste input.
Uso da Biblioteca React Hook Form e Zod
- Todo o formulário deverá ser "regido" pela biblioteca
React Hook Form.
- A validação deverá ser "regida" pela biblioteca
Zod.
- A validação dos dados deverá ocorrer no front-end de acordo com as regras estipuladas:
name: obrigatório, máximo de 255 caracteres.email: obrigatório, deve ser um e-mail válido, máximo de 255 caracteres.password: obrigatório, mínimo de 8 caracteres, máximo de 255 caracteres.password_confirmation: obrigatório, mínimo de 8 caracteres, máximo de 255 caracteres.terms: obrigatório, deve ser um booleano.phone: obrigatório, máximo de 20 caracteres.cpf: obrigatório, máximo de 14 caracteres, deve seguir o padrão 000.000.000-00, deve ser um CPF válido.zipcode: obrigatório, máximo de 9 caracteres, deve seguir o padrão 00000-000.address: obrigatório, máximo de 255 caracteres.city: obrigatório, máximo de 255 caracteres.
- Todos os dados devem ser submetidos de uma vez só para o endpoint da API do Codante.
Note
Zod é uma biblioteca de validação que funciona tanto no node como em browsers. Esse projeto é um SPA, o que significa que iremos usar apenas no browser (client side).
Implementação de validação server-side
Além da validação client-side, a nossa API também implementa uma validação server-side. Um exemplo que pode ser explorado é o caso do campo cpf: na validação client-side vamos checar apenas o "formato" do CPF, enquanto na validação server-side da API também checamos se o CPF é válido pelo seu dígito verificador.
- Implemente, além da validação client-side, também as mensagens de erro de validação retornadas pela API.
🔨 Desafio extra para quem quer ir além
- Crie uma mensagem de sucesso quando a resposta da API for
200.
Neste Mini Projeto, não será preciso implementar nenhum design - já fizemos isso por você.
👉🏽 O que você irá praticar:
Formulários com React Hook Form e Zod
- Validação client-side
- Validação server-side
schemas no zod- Biblioteca
react-hook-form
- Formulários HTML
- Formulários interativos controlados
- Eventos em formulários (blur, click)
- React básico/intermediário
