Validando campos CONDICIONAIS em formulários no React
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- Formulários são muito comuns em aplicações React.js.
E podem existir algumas regras de negócio, validações de campos e campos que dependem de outro.
Como podemos criar validações condicionais de campos em formulários no React.js?!
INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho 26 anos e moro em Goiás. Eu compartilho todo tipo de conteúdo relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #javascript #typescript #forms
INFORMAÇÕES IMPORTANTES 👇
Passo a passo de como criar as mascaras:
th-cam.com/video/8_f_DQLXS3Y/w-d-xo.html
Formulários like a PRO:
th-cam.com/video/awUE9p5ITQA/w-d-xo.html
Livros que eu recomendo 📚:
Código Limpo
amzn.to/3hHXVKY
Como ser um programador melhor
amzn.to/3POQ5fq
Arquitetura Limpa
amzn.to/3Viqw7v
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
Precisava exatamente dessa informação e estava com preguiça de procurar nas docs, obrigado!
Muito show o vídeo. Senti falta de algumas explicações sobre os atributos e métodos que são implementados, podem ser rápidas ou superficiais, mas para entender o porque estou inserindo o criteriaMode, o que significam essas issues do zod e o que é o inclusive, por exemplo.
Valeu e siga com o ótimo trabalho!
Valeu Guilherme!
Existem outros vídeos sobre formulários (vários inclusive hehe) onde explico mais, foco em outros detalhes, recomendo muito você dar uma olhada.
Parabéns pelo vídeo! De onde vem o cpfMask e o cnpjMask, é uma função que você criou, como fazer?
Valeu Camillo! Sim, são funções que eu criei, são apenas aplicação de regex, tem outro vídeo aqui no canal onde eu mostro e ensino conceitos de regex.
Em qual video do canal encontro sobre a função maskCPF, que usou nesse video? Seus videos são muito bons, acompanho direto!
Ainda não tem nenhum vídeo onde mostro essa mascara de CPF Mauricio :/
Mas posso fazer, até pra explicar um pouco de Regex.
E valeu demais, fico feliz em saber que tu ta curtindo os vídeos! 👊
De onde vem a função CNPJ mask??
@@luishenriquerusso2654 é uma função que tenho na pasta constants. Basicamente é uma função que recebe uma string e aplico um regex e retorno a string formatada.
@@devjunioralves gostaria muito de um vídeo explicando sobre
Primeiramente parabens e obrigado vídeo, muito explicativo. Uma duvida, caso eu precise adicionar varios campos, como poderia fazer? Tipo um botão que quando clicado fosse criando inputs
Valeu Carlos!
Tu usaria o useFieldArray do RHF pra fazer isso.
Na playlist de formulários aqui no canal, tem um vídeo que falo sobre isso, confere lá, tu vai curtir.
Opa uma dica, coloca com o que vai estar trabalhando no título do video (zod e react form hook nesse caso) pra se tornar mais fácil encontrar o seus videos...
Faz um video usando o redux com o novo nextjs usando a appdir? Nao estou conseguindo mais pfv
Fala Felipe, blz?
Então, eu quase não utilizo Redux no dia a dia, e dependendo do seu caso, tu não vai precisar ele no Next.js 13. E se de fato precisar de um state management, tu poderia testar o Zustand (que tem vídeo aqui no canal de como utilizar ele com o Next.js 13 e a appDir).
Aliás, esse vídeo do Zustand + Next.js 13 pode te ajudar com os problemas que esta enfrentando com o Redux.
teria como trazer um vídeo sobre cookies no next13 ? ou um exemplo de como fazer uma validação/autenticação de login de usuário
Fala Felipe!
Quero trazer um vídeo sobre autenticação no Next.js 13.
Alguem ja passou por essa situação aqui: imagine que vc precisa fazer um crud de produtos q possuem uma rota para preencher seus campos na api e outra pra fazer upload de imagem. O problema maior eh quando atualizar esse produto, pois nem sempre vc vai precisar atualizar a imagem e os campos juntos. Ou seja, controlar qual chamada a api vc quer, a de atualizar a imagem ou a dos campos ou mudar tudo. Ademais, vlw pelo conteúdo
Tvz o que foi mostrado no vídeo pode resolver. Por exemplo, criar um chackbox perguntando se quer atualizar a imagem do produto e aí sim, aparecer a opção de atualizar a imagem. E tb controla se vai ser uma ou 2 chamadas pra api. Isso deve tá confuso, mas se alguém conseguir entender e tiver outra ideia manda ae pf. Tb pensei em ser um modal só pra atualizar a imagem tb
Poderia explicar como criar essas masks 🎭
Boa Eduardo, o link ta do comentário fixado.
Uma dúvida, se eu quiser fazer um formulário de edição, onde eu preciso que o formulário já esteja preenchido com os dados de uma função assíncrona, como o react query, por exemplo, como eu faço pra preencher os campos com o retorno da api? Seria no Default Values?
Ps. Vídeo excelente.
Excelente pergunta Elivelton! Sim, tu pode usar o defaultValue.
Porém, se tiver utilizando o RHF, ele tem uma função chamada setValue que é exatamente para esses casos, tu passa o campo e o valor e ele atualiza.
Valeu demais!
@@devjunioralves Ah sim, maravilha.
Ele não funciona sem o 'use client'? Como fica o SSR disso? Pra mim deu vários erros de createContext e hydration. Abraços
Sempre que você precisar de interação do usuário, precisa ser um client component Vinícius.
Tem um vídeo aqui no canal onde explico melhor as diferenças entre RSC e RCC.
Poderia fazer um video fazendo um wizardform
Perfeito Thiago, quero fazer sim!
Uma duvida, para performace e melhor usar o state &&() que ele vai remove esse input do html caso esse state for "false" ou usar dataset do html e passamos o state como valor desse dataset e no css usamos display none para esconder ele caso for false ?
junior, pra auth no next js. c usa o next-auth ou faz na mao mesmo? to procurando video de autenticação no youtube e so tem gente usando lib e queria fazer na mao
Depende Rafa, se tu tem um backend próprio, eu geralmente faço "na mão", se não tiver, usa o Next-Auth.
@@devjunioralves tenho um backend proprio, o b.o é que so acho video e artigo com next auth KKK, se puder trazer um video sobre autenticação ia ajudar dmss
@@half7752 Entendi, vou trazer sim Rafa!