[vc_row][vc_column][vc_column_text]É inegável o avanço exponencial das tecnologias, sobretudo nas aplicações web e mobile, que fazem parte do dia a dia de grande parte da humanidade, seja para entretenimento, estudo, trabalho ou outras finalidades. Consequentemente, o fluxo de dados tem acompanhado esse crescimento e varia em diferentes formatos, o que pode acabar confundindo os usuários, além de dificultar o trabalho para os desenvolvedores. Nesse contexto, realizar a validação de formulário pode trazer inúmeros benefícios de usabilidade para tornar mais agradável a experiência do usuário, mostrando feedbacks positivos ou negativos e orientações a respeito dos valores inseridos, por exemplo.
[adrotate banner=”4″]
Pensando nisso, neste artigo, vamos aprender como fazer a validação de formulário com React Hook Form e Yup.
Aplicações React
Trabalhando com aplicações React, podemos encontrar inúmeras soluções para validação de formulários. Bem como, React Hook Form e Yup, que são soluções bastante performáticas e de simples integração para os desenvolvedores.
React Hook Form
React Hook Form é uma biblioteca usada para validação de formulário em aplicações React, sem nenhuma outra dependência. Assim, além de ser eficiente e fácil de usar, ela permite que os desenvolvedores escrevam poucas linhas em sua implementação comparada a outras bibliotecas com a mesma finalidade.
Nesse sentido, criando validação de formulário simples, o React Hook Form, alinhado com os existentes dentro do próprio HTML, suporta as validações: required, min, max, maxlength, minlength, pattern, validate.
Yup
Yup é um construtor de esquema JavaScript para análise e validação de valor. Assim, com seu esquema de validação poderoso e simples de usar, o Yup possibilita uma maneira abstrata que não interfere no restante da lógica de negócio.
Dessa forma, é possível criar um objeto formatado que assemelha-se com o esquema pretendido para um objeto. E em seguida, utilizar as funções deste utilitário para verificar se nossos objetos de dados correspondem a esse esquema. Para, assim, validá-los.
Afinal, vale ressaltar que podemos trabalhar em validações de qualquer objeto na aplicação. Tal qual podem ser utilizados dados de formulários no Front-end ou até no Back-end, dentre outras utilidades.
Passo a passo NA PRÁTICA
React Hook Form e Yup trabalham muito bem juntas. Pensando nisso, criamos um passo a passo para fazer essa integração.
1. Adicionar dependências
Primeiramente, é necessário adicionar as seguintes dependências em um projeto React:
2. Suposição do código
Em seguida, suponhamos que esse é o nosso trecho de código:
3. Adicionar importação
Então, adicionamos a importação dos pacotes no topo do arquivo:
4. Instanciar schema
Neste momento, instanciamos o schema de validação usando yup:
5. Declarar objeto
Agora, devemos declarar um objeto que recebe os seguintes atributos:
- register: método que permite registrar um elemento e aplicar nele as regras de validação;
- handleSubmit: função que irá receber os dados do formulário se a validação for bem sucedida;
- reset: função que irá limpar todos os campos do formulário ou reiniciá-los para seus valores padrão. E, nesse caso, formState, que irá retornar os erros de uma forma simples;
- yupResolver: função que irá gerar as validações com base no schema criado na passo anterior.
6. Adicionar tipagem
Nesse projeto, estamos usando typescript. Por isso, precisamos adicionar a tipagem no useForm. Então, será possível facilmente identificar os atributos dentro o objeto data, retornado pela função handleSubmit. Bem como tipar o nome do input que será registrado usando register.
A interface:
Adicionando a tipagem no método useForm:
7. Adicionar handleSubmit
Neste momento, iremos adicionar os métodos handleSubmit no formulário e register nos inputs:
Observação: o método onSubmitHandler, que está sendo passado como parâmetro para função handleSubmit do React Hook Form e marcado como erro, ainda não foi criado, faremos isso no passo seguinte.
A intelliSense em funcionamento no método register após a adição da tipagem:
8. Criar onSubmitHandler
Então, iremos criar o método onSubmitHandler para receber e usar os dados do formulário:
A intelliSense em funcionamento no objeto com os dados do formulário:
9. Adicionar mensagens de erro
Por último, adicionamos as mensagens de erro para cada input:
10. Finalização
Dessa forma, com tudo pronto, o código fica assim:
Assim, ao rodar o aplicativo, ele deve funcionar assim:
Veja também:
Como utilizar animações Lottie com React
Conclusão
A validação de formulário facilita a aplicação de diversas funcionalidades do sistema. Bem como melhora a usabilidade e experiência do usuário. Então, neste artigo, aprendemos como fazemos a validação de formulário com React Hook Form e Yup.
Pensando nisso, acesse o nosso blog e confira diversas dicas sobre o mundo do desenvolvimento.
Lembrando que as referências utilizadas para a aplicação neste artigo foram: https://react-hook-form.com/ e https://github.com/jquense/yup.
[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]
