Saiba como aplicar a validação de campos no React no seu projeto

campos no react

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

  1. É necessário chamar o componente form. Dentro do form, colocaremos os inputs para a elaboração do formulário (nome, e-mail e senha).
  2. 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

  1. É 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.  

  1. 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.

  1. 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.

  1. Resultado final

Exemplo 02 – Validando idade e data

  1. 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

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

Você deve instalar o cpj-cnpj-validator:

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

  1. 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.
  1. 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.

Escrito por Andreyna Carvalho

Sempre levei a tecnologia e a paixão pelos códigos além de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.

Montando times em startups: saiba por onde começar

remote first

Veja como o remote first é aplicado nas grandes empresas