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:

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

1
2
3
4
5
6
7
{ 
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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?