Validação de formulário com React Hook Form e Yup

[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:

Figura 1. Instalando dependências usando npm

2. Suposição do código

Em seguida, suponhamos que esse é o nosso trecho de código:

Figura 2. Trecho de código para o formulário

3. Adicionar importação

Então, adicionamos a importação dos pacotes no topo do arquivo:

Figura 3. Importando os pacotes do react use form e yup

4. Instanciar schema

Neste momento, instanciamos o schema de validação usando yup:

Figura 4. Instanciando 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.

Figura 5. Desconstruindo o retorno de useForm

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:

Figura 7. Adicionando tipagem no useForm

7. Adicionar handleSubmit

Neste momento, iremos adicionar os métodos handleSubmit no formulário e register nos inputs:

Figura 8. Adicionando as funções do React Hook Form no formulário e 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:

Figura 9. Demonstrando o funcionamento da intelliSense no método register

8. Criar onSubmitHandler

Então, iremos criar o método onSubmitHandler para receber e usar os dados do formulário:

Figura 10. Criando o método onSubmitHandler

A intelliSense em funcionamento no objeto com os dados do formulário:

Figura 11. Demonstrando o funcionamento da intelliSense no objeto data

9. Adicionar mensagens de erro

Por último, adicionamos as mensagens de erro para cada input:

Figura 12. Adicionando mensagem de erro para os inputs

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]

Autor

Validação de formulário com React Hook Form e Yup