Implementação do Yup e Formik para validação de dados.

[gabrielduete]

Eae, galera! Beleza?!

Pensando na validação de dados que o usuário vai digitar no nosso modal de cadastro/login, achei que seria interessante implementar o Yup e o Formik. Se liga, pega o bisu:

Yuuupiii

O Yup me parece auxiliar o processo de validação de maneira muito simples através de um objeto chamado schema onde a gente iria passar os inputs que iam ser validado, passar informações como o tipo de dado, se é requisito do formulário, etc...

Ao meu ver a implementação é bastante simples, e pra deixar mais clean ainda, pensei em implementar o Formik que trabalha muito bem com Yup. No final mostro um exemplo utilizando os dois.

Formik

Como a gente sabe, formulário com react é mais complicado que o normal, então o Formik veio trazendo uma implementação e uso simples para tratar de formulários mais básicos, como o nosso 🙈. O uso de libs mais complexas iria complicar a gente pra algo que deveria ser mais simples.

Analisando nossos modal de cadastro/inscreva-se, acredito que o formik deve ser suficiente para as seguintes atribuições: Obter dados dos formulário e inserir mensagens de erro.

Yup 🤝 Formik

Vou fazer uma demonstração simples de como a gente poderia mesclar os dois pra no nosso modal de login:

Primeiro a gente importa os homi:

import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'

Agora a gente prepara o form:

<Formik
  initialValues={{
    email: '',
    password: ''
  }}
>
  {() => {
    <Form>
      <label htmlFor='email'>Email/Usuário</label>
      <Field name='email' type='text'/>
    </Form>
  }}
</Formik>

Bão? Agora a gente pode inserir nosso objeto schema do Yiupi:

const schema = Yup.object().shape({
  email: Yup.string().required(),
  password: Yup.string.min(6).required()
})

Agora só jogar o esquema(schema :he-he:) do Yup dentro do formik, tipo assim:

<Formik
  validationSchema={schema}
  initialValues={{
    email: '',
    password: ''
  }}
>
  {() => {
    <Form>
      <label htmlFor='email'>Email/Usuário</label>
      <Field id='email' name='email' type='text'/>
      {errors.email && (
        <div>{errors.email}</div>
      )}
      <label htmlFor='password'>Senha</label>
      <Field id='password' name='password' type='text'/>
      {errors.password && (
        <div>{errors.password}</div>
      )}
    </Form>
  }}
</Formik>

errors.email iria exibir uma mensagem de erro padrão quando o usuário não cumpriu com os requisitos dentro do schema, o mesmo pra senha.

Reparem que na senha e no email eu deixei para ser requisito do formulário, ambos com do tipo string, e coloquei um mínimo de 6 caracteres na senha. Podemos passar outras restrições como exigir caracteres especiais, etc...

Por fim, o código fica assim:

import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'

const schema = Yup.object().shape({
  email: Yup.string().required(),
  password: Yup.string.min(6, 'Senha pequena eim, bota uns 6 caractere ai no minimo.').required()
})

<Formik
  validationSchema={schema}
  initialValues={{
    email: '',
    password: ''
  }}
>
  {() => {
    <Form>
      <label htmlFor='email'>Email/Usuário</label>
      <Field id='email' name='email' type='text'/>
      {errors.email && (
        <div>{errors.email}</div>
      )}
      <label htmlFor='password'>Senha</label>
      <Field id='password' name='password' type='text'/>
      {errors.password && (
        <div>{errors.password}</div>
      )}
    </Form>
  }}
</Formik>

Observações

• Talvez a implementação do Formik não seja tão necessária, o yup pode bastar pra gente.
• O código do exemplo pode conter algum erro :he-he:
• O exemplo foi um uso simples, é possível fazer bastante coisa com o yup e formik.
• Nunca mexi nessas libs, então não tenho domínio, seria massa a gente fazer essas parada juntos pra geral entender.

Referências

https://bradhick.medium.com/yup-valida%C3%A7%C3%B5es-no-react-de-uma-forma-muito-simples-700c039114e3

https://blog.betrybe.com/desenvolvimento-web/yup/

https://formik.org/docs/overview

https://stackoverflow.com/questions/49502436/password-validation-with-yup-and-formik

https://github.com/jquense/yup

[oopaze]

Massa, acho que o uso do formik junto ao yup vai nos poupar muito tempo na hora de validar os formulário.

Minha unica ressalva é no uso do formik como component. Diminui muito a legibilidade do componente. Talvez usar ele como hook seja mais fácil de ler e ainda sim manter a simplicidade do projeto.

const formik = useFormik({
  schema: ...,
  initialValues: {...}
})

meio que esse approach.

[oopaze]

@gabrielduete, tá afim de abrir uma issue configurando (instalando) o Yup e o Formik?

[MarcosLudgerio]

Se precisar de ajuda, eu posso ver isso.

[oopaze]

@MarcosLudgerio, pode arrochar.