Quando lidamos com formulários, inserções de dados em algum serviço como enviar um POST para um banco de dados, salvando os dados inseridos no banco, jamais podemos esquecer de validar os dados inseridos.

Dessa forma não poluímos nosso serviço ou banco de dados com dados inválidos, vazios ou sem sentido a respeito das regras de negócios da nossa aplicação.

Para isso podemos validar cada campo com os parametros necessários. Por exemplo, o campo "Nome" não pode ter menos de 3 caracteres.

if (nome.length < 3) {
  console.log("Erro: o nome deve ter pelo menos 3 caracteres.");
}

Agora imagine que você tem os campos: nome, idade, peso, altura.
Ainda assim é possivel validar, ainda que dê mais trabalho, aplicando as regras de negócio, imagine que um cadastro NÃO pode ser efetuado sem nome e idade, em hipótese alguma.

//validação nome
  if (!nome) {
    console.log("Erro: o nome é obrigatório.");
    return false;
  } else if (nome.length < 3) {
    console.log("Erro: o nome deve ter pelo menos 3 caracteres.");
    return false;
  }
  //validação idade
  if (idade === undefined || idade === null || idade === "") {
    console.log("Erro: a idade é obrigatória.");
    return false;
  }
  if (idade < 0 || idade > 120) {
    console.log("Erro: a idade deve estar entre 0 e 120.");
    return false;
  }

🛠️ O problema

Apenas 2 campos geraram 17 linhas de código, agora pense que você tem 10, 20 campos a serem validados com parametros diferentes nesse mesmo campo, quantas linhas seriam necessárias para validar TODOS os campos corretamente? o quanto do seu TEMPO seria necessário para resolver esse problema? outras pessoas seriam capazes de mexer nesse bloco de código caso você não pudesse? e para dar manutenção nesse tipo validação, ficaria legível?
dev estressado

A resposta é NÃO, o código se tornaria extenso, de difícil leitura e manutenção, transformando uma tarefa simples em algo trabalhoso e sujeito a erros. Além disso, um desenvolvedor deve solucionar um problema e não criar outros 4!

✅ A solução

Para isso, podemos utilizar a biblioteca Yup para nos ajudar. A Yup é uma biblioteca javascript poderosa e intuitiva quando falamos em validação de dados e formulários, ela ajuda a garantir que os dados estejam no formato correto, com tipos certos, campos obrigatórios, e regras personalizadas.

📦 Instalação

npm: npm install yup
yarn: yarn add yup

Caso exemplo

Temos que fazer um POST dentro de um banco de dados com uma API em Typescript, sabendo disso, podemos criar uma Interface para modelar como os dados devem ser enviados e utilizar a Yup para validar.

import { Router } from "Express" // Router
import * as yup from 'yup'; //importando a biblioteca após instalar

// interface 
interface ICarro {
   modelo: string,
   ano: number,
   cor: string,
   fabricante: string,
   placa: string
   modificacao?: string[]
}

// schema da yup para validação

const bodyValidation: yup.ObjectSchema<ICarro> = yup.object({
  modelo: yup.string().required("Digite o modelo do carro"),

  ano: yup.number().required().min(1886, "ano inválido"),
       // o primeiro carro foi em 1886

  cor : yup.string().required("Digite a cor do carro"),

  fabricante: yup.string().required("Digite a fabricante do carro"),

  placa: yup.string()
            .required('A placa é obrigatória')
            .matches(/^[A-Z]{3}-\d{4}$/, 'Placa no formato inválido (ex: ABC-1234)'),
         //regex para o padrão de placa brasileira

  modificacao: yup.array().of(yup.string()).optional()
        //modificacao é um array de string opcional

})

// Metodo que faz o POST, o body da requisição recebe a interface

export const post = async (req: Request<{}, {}, ICarro>, res: Response) => {
    let validatedData: ICarro | undefined = undefined
    try{
        validatedData = await bodyValidation.validate(req.body)
        // validação acima
        console.log(req.body) // mostra o body da requisição
        res.json(validatedData) 
        // envia uma responsa json da validatedData (linha acima)
    } catch (err) {
        const yupErr = err as yup.ValidationError 
        // em caso de erro, a yup tem tratamento de erros próprio
        console.log("Erro: ", err)
        res.json({
            errors: {
                default: yupErr.message, // mensagem de erro
            }
        })  
    }
}


//Rota
router.post('/carros', post)

Exemplos de body

// ✅ Esse objeto passaria na validação
{
  modelo: "Civic",
  ano: 2020,
  cor: "Prata",
  fabricante: "Honda",
  placa: "ABC-1234",
  modificacao: ["turbo", "rodas esportivas"]
};

// ❌ Esse objeto NÃO passaria na validação
{
  model: "Fusca", // model errado, deveria ser modelo
  ano: 1800, // ano inválido
  cor: "", // cor vazia
  fabricante: "Volkswagen",
  placa: "123-ABCD", // placa em formato inválido
  modificacao: ["", 123] // contém string vazia e um número (o schema espera só strings)
};

💻 Conclusão

Dessa forma, podemos realizar a validação dos campos com muito mais eficiência, velocidade e práticidade. A yup permite que tenhamos um código bem mais limpo e organizado, habilidade essencial para um bom desenvolvedor.

📚 O que aprendemos?

  • Boas práticas ao lidar com validações
  • Utilizar a Biblioteca Yup
  • Implementar a biblioteca Yup em método de API

🎓 Referêcias

A biblioteca da yup é muito completa, entre na documentação e aprofunde seus conhecimentos

NPM
github/yup

🧑‍💻 Autor

Matheus Patricio

Onde me achar?

Linkedin
Github
portfólio

🙏 Agradecimentos

Se você ficou até aqui, agradeço de coração.
Até mais!