Formik parte 3 — Validações de formulário: Simples, declarativas e poderosas em React!
Acompanhe a série completa!
Parte 1 — Construa formulários em React, sem lágrimas.
Parte 2 — Melhorando formulários em React com libs de componentes
Eae! Nessa parte 3, iremos falar de validações, como você já deve bem ter percebido. Em meus poucos anos de experiência com validações de formulários, seja ela em qualquer linguagem, sempre foi uma solução verbosa e repetitiva. Foi assim que (infelizmente) eu aprendi, pelos lugares que passei.
Contudo, quando decidi procurar uma ferramenta para melhorar a construção de forms em React (eu vinha do Vue, onde graças ao twoway data binding, as coisas eram mais fáceis, portanto queria isso para minha vida com React também), primeiramente comecei a mexer com Redux Forms e pra ser sincero, não lembro como valida os formulários. Voltando à procura, achei o Formik e logo de cara, já fiquei extasiado com a simplicidade e o poder que ele proporcionava! Quando fui para a parte de validações nativas, a felicidade se manteve alta, pois era uma função bem bacana, que casava diretamente com um componente de exibição de erro (tipo aqueles textos que ficam embaixo do input). Foi um sucesso.
De volta a documentação para destrincha-la, descobri que no Formik foi criado uma integração especialmente com o Yup, ferramenta de Object schema validation. Então, depois de alguns exemplos e de entender o espirito da coisa, fui aplicar e … PORRA! Vi que era 10x, 20x mais poderosa que a validação nativa do Formik, que já era boa! Então, de lá pra cá, não deixo de usar mais!
Primeiramente, vou mostrar a parte nativa e posteriormente, a integração com o Yup e seus benefícios.
O Yup também vale para React Native!
PS: Vamos usar a mesma validação — uma simples e uma mais complexa — para ambos os casos, afim de comparação!
PS2: No final do artigo tem um codesandbox para você brincar :)
Well, talk is cheap show me the code!
Validação nativa — simples
- As validações começam na linha 9 e são bem simples. apenas se estão preenchidas ou não.
Validação nativa — um pouco mais complexa
- As coisas começam a ficar mais cabulosas / verbosas
Agora, vamos ao que interessa!
Por algum motivo que não sei qual, a doc pede para importar o Yup assim:
import * as Yup from “yup”
Ao utilizar o Yup, deixaremos de invocar a prop validate do withFormike usaremos a validationSchema.
- Obrigatoriamente criamos a estrutura
Yup.object().shape({ ... }); - A chave do
objectdeve ser o mesmo nome dovaluesusado nomapPropsToValuescomo demostrados nas linhas 7, 8 e 9.
Validação com Yup — simples
- Schema em JSON, simples e declarativo!
Validação com Yup — um pouco mais complexa
- Agora sim, começa a ficar interessante!
- Basicamente, os métodos seguem o padrão: Primeiro parâmetro é o valor e o segundo é a mensagem de erro
- Existe uma infinidade de métodos prontos e que com certeza vão te atender!
Com isso, em ambos os casos, basta chamar o componente de erro, utilizando a prop namee pronto!
Você pode customizar o componente de ErrorMessage:
E o resultado final, das validações:
Tem até validação com condicional a lá if / else !
- Se
isBigfor verdadeiro, então o valor mínimo decountserá 5, caso contrário, será 0.
Aqui você consegue dar uma olhada nos exemplos e na API do Yup
Acho que por ora é isso, obrigado por ler :)
Aqui você pode brincar com o código:
