Validação De Formulário Com Yup - React

Você já precisou validar se os dados que estão sendo enviado pelo front-end realmente estão corretos?
Realizar uma validação antes de enviar seus dados para sua API é de extrema importância, pois dessa forma evitamos erros e envio de informações erradas!

Uma maneira fácil para validarmos nosso formulário é utilizando um cara chamado Yup!

Primeiramente, vamos instalar ele:

yarn add yup

O Yup faz validações de dados do tipo string, integer, boolean, array, object e date.
Então vamos criar uma validação da seguinte estrutura:

{
  email: email  // obrigatório
  nome: string, // obrigatório
  endereco: string // obrigatório,
  numero: number // obrigatório
  complemento: string // não obrigatório
}

Agora vamos criar o nosso Yup.object:

const userSchema = yup.object().shape({
  email: yup.string().email().required(),
  nome: yup.string().required(),
  endereco: yup.string().required(),
  numero: yup.number().required().positive().integer(),
  complemento: yup.string().notRequired(),
});

Legal! Agora como podemos validar um objeto com o que acabamos de criar com o Yup?
Com a lib, nós temos acesso à uma função chamada isValid, que é uma promise, então podemos fazer da seguinte forma:

const submitForm = async () => {
  const userFormData = {
    email: "[email protected]",
    nome: "Victor Jordan",
    endereco: "Rua teste, 123, jardim Oriente, São Paulo",
    numero: 123,
  };

  // Essa função retorna true/false
  const isValid = await userSchema.isValid(addressFormData);
  if (isValid) {
    // envio informações para o backend
  }
};

Fácil validar formulários assim, não é mesmo?