Validação de campos no React: saiba como usar

A validação de campos no React é aplicada para garantir que os dados colocados sejam fiéis ao que foi solicitado no input para o seu devido tratamento. Existem diversas ferramentas para fazer a validação e você deve escolher aquela que melhor se encaixar no seu projeto, principalmente, nos quesitos usabilidade e desempenho.

Nesse artigo, vamos abordar a validação manual utilizando a biblioteca do Formik e Yup.

Por que devemos validar formulários?

Imagine que você tem uma biblioteca para gerenciar com informações inválidas comprometendo a comunicação com o cliente.

Como você vai ligar para um usuário que em vez do número de telefone colocou letras? Como é possível fazer a cobrança de alguém que escreveu números aleatórios no campo de CPF? Como mandar um e-mail para o usuário que deixou o campo em branco?

A validação dos campos de formulários veio com o objetivo de filtrar os dados para que essas informações sejam devidamente preenchidas.

Desse modo, algo que poderia facilitar a validação e deixar mais intuitivo ao usuário seria a aplicação de máscaras nos campos de formulário. Aliás, sobre esse assunto, consulte o nosso conteúdo feito anteriormente sobre como adicionar máscaras em React.

Quais dados devem ser validados?

Para fazer a validação de campos no React, é importante entender que podem ser validados os seguintes itens, entre outros:

Campos de CPF;
E-mail;
Número de telefone;
CEP;
Data;
Endereço;
Nomes;
Senhas com campos obrigatórios.

Portanto, todos os campos em que o usuário precisa escrever alguma informação devem ser validados.

Aplicando a validação dos campos

Para o desenvolvimento da atividade de validação de formulários vamos utilizar uma aplicação React.

Validação padrão do Js

Exemplo 01 – Validando nome, e-mail e senha obrigatórios

É necessário chamar o componente form. Dentro do form, colocaremos os inputs para a elaboração do formulário (nome, e-mail e senha).
A partir disso, você pode usufruir das opções, utilizar o required (caso seja obrigatório), exigir o mínimo/máximo de caracteres, formatar para e-mail, entre outras ações que se façam necessárias.

Esse padrão do Js auxilia nas validações com as bibliotecas externas.

Validação com Formik e Yup

O Formik é uma lib que auxilia na construção de formulários. Ele fornece os componentes Form, Field e ErrorMessage.

Para esse formulário, você vai precisar instalar o Formik e o Yup:

Exemplo 01 – Validando e-mail e senha obrigatórios

É necessário importar os componentes do Formik e o Yup:

Portanto, o Formik será usado para passar as props, já o Form para passar os campos, o Field para passar as entradas, ErrorMessage para mostrar a mensagem de erro e, finalmente, o Yup para validar o campo.

Criar uma constante informando o que o Yup deverá validar. Lembre-se de nomear dentro das melhores práticas do Clean Code. Para a nossa validação, ele será um objeto para e-mail e senha.

Para a validação do e-mail e senha, eu coloquei o principal conforme a documentação no Yup, contudo você também poderá acrescentar algumas informações para melhorar a validação.

Elaborar o formulário. Agora chegou a hora de passar ao Formik os valores iniciais de e-mail e password.

Convencionalmente eu coloquei vazio, mas você pode deixar com alguma palavra pronta, e o Yup dentro do validationSchema que, por coincidência, coloquei o mesmo nome 🙈.

Dentro do Form, passaremos o Field (recebendo type, name e placeholder) e o ErrorMessage informando se o name é e-mail ou password para informar o erro escrito no yup.required.

Observação: coloquei component=’div’ a fim de que a mensagem apareça embaixo do campo e não ao lado.

Resultado final

Exemplo 02 – Validando idade e data

O mesmo recurso usado para e-mail poderá ser aplicado em outros campos de validação.

Para a idade, por exemplo, acrescentei algumas informações extras no Yup para uma validação fidedigna.

Para a idade e o ano de nascimento, informei que seriam números, preenchimento obrigatório e que deveria ser maior de 18 anos. Feito isso, apenas apliquei nos componentes. Pronto! Validação concluída.

Exemplo 03 – Validando rede social e CPF

Para a validação de rede social, utilizaremos regex e CPF em uma lib externa.

Você deve instalar o cpj-cnpj-validator:

Com o new RegExp, você irá elaborar o formato de URL que deve ser aceito no Yup pelo matches.

Para a verificação do CPF, chamei o .test em que se verifica se o value (valor colocado pelo usuário) é um CPF válido. Não esqueça de importar o CPF do cpj-cnpj-validator.

E o resultado final do código de validação, rede social e CPF ficou assim:

Observações

Você viu neste conteúdo algumas entre as diversas outras formas de validar um campo de formulário. O Formik é uma das melhores opções juntamente com o Yup.

É importante ressaltar que você pode elaborar sua própria lógica de verificação para validar, caso não queira consumir biblioteca de terceiros como a lib do CPF.

Aproveite para conferir a documentação usada clicando nos links:

Documentação Regex:

Conclusão

Após a validação de campos no React você estará livre para fazer os tratamentos necessários e evitar o gerenciamento de informações inválidas.

Pensando na melhor experiência ao usuário, é importante aplicar máscaras nos formulários para que fique intuitivo ao usuário e você tenha um controle maior das informações.Esse foi mais um artigo técnico da Coodesh? Já se increveu na nossa plataforma para ter seus conhecimentos validados e se candidatar nas vagas de emprego? Saiba mais.