DEV Community

Jardel
Jardel

Posted on

1

Validando input file e select com Yup

Fala, galera! Estava implementando aqui um formulário com validação Yup e me deparei com dois campos que nunca tinha trabalhado: select e input file.

Procurei algumas formas de fazer a melhor validação desses campos e confesso que achei bem escasso essas informações. Então vou deixar registrado aqui caso alguém queira uma fonte de ajuda na hora de implementar esses campos.

Bom, o formulário que implementei é esse:
UI Formulário

E a solução que implementei foi essa:
Código Yup


O que eu usei

  • O Yup.mixed() trata todos os tipos, mas você também consegue tipar para receber algo específico.

  • O Yup.oneOf() me ajudou a setar corretamente as options do meu select e a validar se o campo estava preenchido, se não tivesse preenchido ele retornava uma mensagem de erro personalizada.

  • O Yup.test() eu adicionei para validar o input file. Nele eu precisava verificar se o campo estava preenchido e se era um .pdf, e também tem o retorno de mensagens de erro personalizadas.

Essa foi uma solução que eu desenvolvi para o que era necessário.

Sugestão: Se você tem alguma sugestão de melhoria ou qualquer que seja, comenta aí.

Ressalva: Também deve haver validação no backend para prevenir alteração no tipo do arquivo via proxy.


Palavras-chave: yup, input file, select, validate, how to validate input file with yup, how to validate select with yup.

Neon image

Resources for building AI applications with Neon Postgres 🤖

Core concepts, starter applications, framework integrations, and deployment guides. Use these resources to build applications like RAG chatbots, semantic search engines, or custom AI tools.

Explore AI Tools →

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay