gem-hunterFazer 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 dinâmico usando React Hook Form e Zod para facilitar o desenvolvimento.
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:
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
tab).Máscara de telefone, CPF e CEP
telefone, cpf e cep.(00) 00000-0000, 000.000.000-27 e 00000-000.Preenchimento automático de Endereço (rua) e Cidade após preenchido o CEP
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
React Hook Form.Zod.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.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.
200.Neste Mini Projeto, não será preciso implementar nenhum design - já fizemos isso por você.
schemas no zodreact-hook-form