Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Jardel
Jardel

Posted on

     

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 einput 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

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

  • OYup.oneOf() me ajudou a setar corretamente asoptions do meuselect e a validar se o campo estava preenchido, se não tivesse preenchido ele retornava uma mensagem de erro personalizada.

  • OYup.test() eu adicionei para validar oinput 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.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

More fromJardel

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp