Formik e Yup: valide formulários no React sem complicar as coisas

Os formulários sempre foram um dos elementos mais comuns e úteis em aplicações web. Permitem-nos recolher dados do utilizador, validá-los e enviá-los para um servidor ou base de dados. Porém, trabalhar com formulários no React pode ser desafiador, pois envolve saber como lidar com estados, eventos, validações e erros de forma eficiente e escalável.

Nos primeiros dias do JavaScript, praticamente não havia documentação ou bibliotecas para nos ajudar a implementar todos os features que gostaríamos que nosso site tivesse. Tudo tinha que ser feito “à mão” e, francamente, alguns desenvolvimentos custaram-nos suor e lágrimas.

Felizmente, agora existem bibliotecas para praticamente tudo, e elas facilitam a criação dos mais diversos componentes no React.

Hoje vou ensinar como usar o Formik e o Yup para criar formulários robustos e fáceis de validar no React. Veremos como instalar e configurar ambas as bibliotecas, como criar um componente de formulário com Formik, como definir um esquema de validação com Yup e como exibir mensagens de erro e sucesso ao usuário.

Após a conclusão, você terá um formulário funcional pronto para utilizar em seu projeto. Você se atreve? Me acompanhe!

Usar ou não usar bibliotecas? Essa é a pergunta!

Ao se deparar com um projeto de desenvolvimento, depois de entender perfeitamente o objetivo, desenhar a arquitetura, estabelecer o fluxo de navegação, uma das decisões que você terá que tomar é se vai ou não usar bibliotecas, para que vai usá-las e em que medida.

Usar bibliotecas no React pode ser muito benéfico, pois permite aproveitar soluções comprovadas e acelerar o desenvolvimento da sua aplicação. No entanto, você deve avaliar cuidadosamente se vale a pena usá-los, considerando aspectos como qualidade, desempenho, dependências e comunidade de suporte.

Em geral, se você tem um projeto pequeno em que o grau de complexidade não é alto e prefere manter o tamanho da sua aplicação controlado, não é recomendado o uso de um grande número de bibliotecas.

Por outro lado, se necessitar de funcionalidades complicadas, especiais ou repetidas ao longo do código, a utilização de bibliotecas externas pode ser de grande ajuda.

No nosso caso, para fazer um formulário extenso ou que requeira certo grau de validação de input, utilizaremos a combinação vencedora “Formik + Yup”.

O que é Formik?

É uma biblioteca que simplifica o processo de criação e validação de formulários interativos e se tornou uma escolha popular entre os desenvolvedores do React, devido à sua abordagem intuitiva e capacidade de gerenciar facilmente o estado do formulário.

Formik fornece componentes e utilitários que permitem definir rapidamente o estado inicial, definir validações personalizadas e lidar com eventos relacionados ao formulário, como envio e atualização de valores.

Outra vantagem que apresenta é a compatibilidade com o gerenciamento de campos de formulários aninhados e arrays dinâmicos, bem como sua integração com outras bibliotecas, como Yup ou Redux.

¿Yup? Do que se trata?

Dentro das interações que acontecem durante o funcionamento de uma aplicação web, uma parte importante está relacionada à validação de dados: Que tipo de dados serão armazenados em um banco de dados? Apenas números são esperados? Caracteres especiais são permitidos?, etc.

A validação de dados deve ser realizada tanto no front-end quanto no back-end. Caso o usuário não esteja inserindo o tipo de informação esperado, devemos notificá-lo imediatamente e não permitir o envio de dados não validados ao servidor.

Essa validação pode ser feita de diversas maneiras, escrevendo funções de finalidade específica para cada campo a ser validado, através de expressões regulares, etc. Porém, se falamos em validação de dados dentro de um formulário, existem muitas bibliotecas que nos ajudam nisso, uma das mais populares é a Yup.

Yup é uma biblioteca de validação de esquema que facilita a definição e validação de estruturas e tipos de dados em aplicativos React. Fornece uma maneira declarativa e fácil de definir regras de validação usando uma ampla variedade de métodos predefinidos e a capacidade de criar validações personalizadas.

Ao utilizar o Yup, você pode garantir que os dados inseridos em seus formulários atendem aos requisitos estabelecidos, melhorando a qualidade e integridade das informações.

Crie seu primeiro formulário com Formik + Yup

O primeiro passo será instalar as bibliotecas. Para fazer isso, digite as seguintes linhas no terminal do seu projeto, usando npm ou yarn, respectivamente:

npm install formik yup

yarn add formik yup

Nosso objetivo será construir um componente chamado MyForm, que renderizará o formulário base para adoção de um animal de estimação de uma fundação de resgate de animais. Caso o usuário já tenha criado um formulário anteriormente, o componente MyForm recuperará esta informação, para que possa ser editada a qualquer momento.

Para demonstrar claramente as vantagens de usar essas duas bibliotecas, inicialmente escreveremos nosso componente em JavaScript puro e posteriormente reescreveremos usando Formik e Yup.

Todos os campos do formulário são obrigatórios e a informação não será processada sem que este requisito seja verificado.

Será também validado que as entradas também cumprem estas condições:

·   name: Pelo menos duas palavras separadas por um espaço. Cada palavra deve ter no mínimo três letras e números não são aceitos.

·   age: Pelo menos 2 dígitos numéricos. O número deve ser maior ou igual a 18 e menor ou igual a 75.

·  city: Sólo letras con un mínimo de 4.

·  address: Palavras que permitem apenas letras, números e caracteres especiais comumente encontrados em endereços, como números, #, -, etc.

Nosso formulário de projeto deve ser semelhante ao abaixo, embora neste artigo não iremos revisar a parte de estilos dele.

Formulário sem bibliotecas

Abaixo está o código do componente escrito com JavaScript puro:

O objeto InitialValues ​​contém as informações que serão exibidas em cada um dos campos do formulário. Caso não haja informações armazenadas anteriormente, serão exibidas as informações correspondentes a cada placeholder.

O objeto validaçãoSchema define as regras de validação para o formulário. Cada campo possui uma chave neste objeto, com seu nome correspondente e um objeto contendo propriedades de validação. Abaixo está uma descrição das propriedades utilizadas neste objeto:

• Validate: Usado para realizar a validação personalizada do valor do campo. Recebe o valor como argumento e retorna uma mensagem de erro se o valor falhar na validação. Se o valor passar na validação, nenhuma mensagem de erro será retornada.
• Required: Uma mensagem de erro exibida se o campo estiver vazio ou não tiver um valor selecionado (no caso de campos select). Indica que o campo é obrigatório e deve ser preenchido.

Na função validateField, o objeto ValidationSchema é usado para validar um campo específico. Verifica se existe uma definição de validação para o campo e executa a validação correspondente. As mensagens de erro são armazenadas na matriz de erros.

A função ValidateForm itera em todos os campos do formulário e usa validateField para validar cada campo. Os erros são armazenados no objeto de erros, onde a chave é o nome do campo e o valor é uma matriz de mensagens de erro.

A função handleSubmit coleta os dados do formulário, os processa e trata a resposta ou os erros resultantes.

Além disso, o componente usa as funções handleChange e handleFormSubmit para lidar com alterações nos campos do formulário e seu envio, respectivamente. Chamar handleFormSubmit executa a validação do formulário usando validateForm. Se não houver erros de validação, a função handleSubmit será chamada para processar as informações do formulário (por exemplo, enviá-las ao servidor).

Formulário com Formik e Yup

Ao usar Formik e Yup, o código tornou-se visivelmente mais curto e mais legível. Além disso, o tempo de escrita foi consideravelmente reduzido.

Usaremos o mesmo código do caso anterior para handleSubmit e initialValues, portanto será omitido abaixo.

Para validar os dados, apenas é usado o objeto validationSchema, criado com Yup.object(). Aqui definimos as regras de validação para cada campo usando os métodos fornecidos pelo Yup, como .string(), .number(), .matches(), etc.

Envolvemos todo o formulário dentro do componente <Formik>, que se encarregará de gerenciar o estado, validações, envio de dados e gerenciamento de erros, através das informações que passamos pelas propriedades:

• EnableReinitialize: Permite que os valores iniciais sejam reinicializados quando as initialValues mudem.
• InitialValues: Define os valores iniciais dos campos do formulário.
• ValidationSchema: Especifica o esquema de validação usando a biblioteca Yup.
• OnSubmit: Especifica a função a ser executada quando o formulário for enviado.

Finalmente, em vez de usar os elementos <form>, <select>, <input>, etc., usamos os componentes <Form>,  <Field> e <ErrorMessage> de Formik, com seus estilos correspondentes.

Conclusão

Em resumo, a utilização do Formik e do Yup apresenta muitos benefícios na hora de gerenciar um formulário, economizando um tempo valioso que podemos investir em outros aspectos do nosso projeto.

Você gostaria de usar essas bibliotecas?