Como fazer VALIDAÇÃO de FORMULÁRIOS com JavaScript

Olá pessoal, no vídeo de hoje vocês vão aprender como fazer validação de formulários com JavaScript.
Gostou desse vídeo ? Então acesse: kzbin.info...
✅ SOBRE O CANAL:
Esse canal foi criado com o objetivo de compartilhar conteúdos sobre tecnologia, programação, viagens, marketing digital e diversas experiências.
🔴 REDES SOCIAIS:
Instagram: @gutoneitzke
Facebook: Gustavo Neitzke
📍 Playlists do canal:
Curso de Algoritmos e Lógica de programação com JavaScript: • Algoritmos e Lógica de...
Curso de Laravel 8: • Curso de Laravel 8
Curso de PHP: • Curso de PHP7 do iníci...
Curso Banco De Dados: • Curso Banco de Dados 2020
Assunto de programador: • Assunto de programador
Curso de JavaScript: • JavaScript básico
Vlogs: • Vlogs
✔️ CONTATO: [e-mail]
#GustavoNeitzke

[@Laninha_BR]

Sou portadora de fibromialgia ( dores crônicas) e além de alguns sintomas um que incomoda bastante é o fibrofog, conhecido como nevoeiro cerebral. A pessoa perde a capacidade de se concentrar e também tem um déficit cognitivo e dificuldades de aprendizagem. Sua aula foi excelente e me ajudou a compreender um assunto que no meu ponto de vista tem uma certo grau de complexidade. A sua didática é muito legal. Muito obrigada por compartilhar o seu conhecimento. Valeu !

[@cristianpereira3259]

Parabéns Gustavo Neitzke por este seu trabalho, nós precisamos muito de sua dedicação e profissionalismo para nos ajudar neste início de profissão programador, pois é por meio destes tutoriais que ganhamos força e enriquecemos os nossos conhecimentos para ingressar nesta área tão complexa para alguns como eu. Pois a cada dia um novo desafio, atualizações repentinas que enfrentamos, então mais uma vez muito obrigado e nunca para de nos ajudar.

[@AugustoFAS18]

Dei uma pausa na codagem aqui para agradecer a você, Gustavo, pelo excelente trabalho que está ajudando não só a mim mas também a várias outras pessoas.

[@brunoferreiraadev]

Esse cara é muito bom, ensina de uma maneira fácil de aprender, meus parabéns!!!👋👋👋

[@haydukieder]

cara, como esse canal tem poucos inscritos e poucas interações nos comentários. que didática boa pra caramba.

[@bruxoleonardo]

O próprio youtube bloqueia

[@lyzin0772]

meu Deus até quem fim eu aprendi isso 🙏🙏🙏🙏

[@francish886]

Fala Gustavo, muito obrigado por esse video, tava quebrando a cabeça aqui pra fazer validação e tu me ajudou demais, valeu mesmo! Graças ao teu video consegui validar meu formulario!

[@danielfrausino7596]

Gosto muito dos seus vídeos, eu aprendo bastanto me destraio e nss muito bom parabéns cara você é o melhor ❣️

[@ICodEPT]

Brabo! Eu não conhecia seu canal. Ganhou um adepto. rs Parabéns 👏👏👏

[@johnatanchagas8243]

Bora lançar mais vídeos do curso de javascript kkkk! Muito bom! parabéns pelo canal e ótimos conteúdos!

[@anonimux6612]

Seu canal é incrível para os iniciantes. Parabéns

[@klebercoelho99]

simplesmente obrigado, estava realmente precisando disso, estava com dificuldade em um projeto do meu curso e esse vídeo me ajudou muito!!!

[@aprendizdefunileiro9281]

Fala Gustavo beleza ? Mano, quero te agradecer por fazer videos como esse. Esse tipo de video é muito util pra mim que estou estudando Js, eu descubri varias coisas que eu não utilizava em meus codigos, a forma que você utiliza funçoes e utiliza o seletor de objetos (qurySelectorall) abriu a minha mente para varia possibilidades e simplicidade de fazer codigos mais curtos e objetivos com facil modificação. Deus abençoe sua vida irmao sucesso!

[@nicollasfernandes4315]

sim mano nunca pensei em criar uma funçao para dar setError para economizar linhas

[@flaviovalentim1575]

Parabéns Gustavo, muito bom a didatica para apresentação do assunto, só senti falta da validação com select

[@priscilaa.7981]

Gratidão Gustavo.

[@matheusprogramador]

Um dos poucos fora o Guanabara que explicam muito bem! Tirou muita onda irmão!

[@treinonossodecadadia8014]

cara, do que adianta um video inconclusivo. o cara validou e ai? como envia o formulario? a parte mais importante nao fez

[@levisanches1636]

@@treinonossodecadadia8014 cara... um passo de cada vez, o tema do vídeo é sobre validação. se for o caso ele faz a continuação depois mostrando o envio e etc.

[@treinonossodecadadia8014]

@@levisanches1636 kkk e tipo vc ensinar o cara a dirigir pelo video game. Qual a função de um formulário? Enviar msg, a parte mais importante n fez kk ainda acha normal

[@dihcavallcantegame]

Você é fera demais men, ta me ajudando demais na área da programação

[@lisianeneitzke6045]

Com certeza cada dia melhor 👏👏👏

[@sameernasri5892]

Muito foda seu conteúdo! To entrando na área de programação e teus vídeos ajudam bastante.

[@jacsonandreola4360]

Showww, me ajudou muito. Dexia te pedir uma coisa, tu tem alguma aula onde ensine a validar se já tem um e-mail ou usuário cadastrado?

[@fbelfort_]

Ganhou uma inscrita! Excelente conteúdo, didática simples e compreensível. Estou criando um form pra um website e após a validação ele não vai pra página principal do site, já rodei meio mundo e não consegui resolver, quem puder dar uma mãozinha eu fico agradecida!

[@mayconrocha8723]

Sensacional demais Gustavo.

[@danielfernandes5182]

Tu é bom, mano! Manda muito bem!

[@renanaragao1957]

sempre com otimas aulas

[@junninxd]

Mano, AULA ESPETACULAR! Ajudou muito!

[@oistaili]

muito obrigado pelo aula irmão!!

[@matheussoareslima3498]

Na function mainPasswordValidate não seria necessário chamar a função comparePassword é inútil , pois ela é chamada no onInput lá em cima a parti do momento que o usuário digita algo , sendo nesse momento ela é invocada diretamente e não sendo necessário chamar ela duas vezes Muito bom o conteúdo é uma só uma observação no código

[@levisanches1636]

nesse caso é necessário sim, basta fazer o teste de colocar a senha, repetir a mesma... depois mude a senha novamente, a validação precisa acusar novamente que a senha não é equivalente, por isso a necessidade de chamar a função dentro main

[@Maxnovais777]

O mano faz um vídeo desenvolvendo uma página em HTML e CSS e Javascript sei lá

[@pierreleal395]

Brabo dms

[@Paulo_Mateus]

Mano estou com um problema na ultima parte 24:00, o event prevault simplesmente está impedindo de enviar enviar a mensagem, ao clicar no botão submit ele não envia mais como antes.

[@saturnvibes]

cara, você consegui contornar esse problema?

[@アラウーホムリーロ]

Muito bom esse vídeo. Só ficou a pergunta na minha cabeça: "Essas são todos os tipos de validações de formulário? Ou existe mais tipos e formais de validar elementos de um formulário? "

[@gildasiooliveira8915]

Excelente!

[@CachorroCururu]

Melhor que muito curso caro, Alô dona EBAC... Rsrsrs

[@fcgames7671]

Estou fazendo eback , vim aqui para me tirar dúvidas, sobre validação..

[@LouvadoIsaias-cn3np]

Você me ajudou muito cara

[@nandorace]

Poderia complementar esse vídeo inserindo esses dados em um banco de dados?

[@GustavoNeitzke]

Olá Fernando! Sim, já temos um vídeo ensinando exatamente isso aqui no canal kzbin.info/www/bejne/h4DIdXhto7V3p5I

[@gomessIeo]

Ficou só uma dúvida, pq quando clico para enviar o form, com todos os campos validados, ele não "reseta" como se tivesse enviado?

[@MauricioCaiombe]

Mano PARABÉNS

[@andremonteiro1369]

Faz um desse real, salvando em algum banco de dados e mostrando no banco. Obrigado, pela aula.

[@pedrocfreitas]

porq toda vez que clico pra validar, algum função para de funcionar? estou colando a validação no mesmo botão em dois "onclik" separado por ; ....

[@treinonossodecadadia8014]

so n entendi uma coisa, beleza, ta validando. mas e a parte mais importante? como enviar esse formulario para o php?

[@juankauepereiramoura3950]

tbm to com a mesma duvida

[@Yehovany_Dinis]

Ele tem uma aula sobre isso... Vai ver lá no perfil dele

[@aprendizdefunileiro9281]

fala Gustavo blz, qual tema de cores você utiliza ?

[@cklevertytimbakcl6029]

E aí, estou com uma dificuldade no envio do formulário ao banco de dados. Como fazer? A conexão ja foi feita com php mas os dados do formulário n aparecem la, ele simplesmente cria os ID’s

[@Laninha_BR]

Mestre, acabei deletando por engano a minha mensagem. Seria possível postar novamente o código fonte? Agradeço desde já.

[@sonapj9321]

Valeu ✌🏾

[@eduardoborgesgg]

depois que eu fiz as alterações meu botão de enviar não está mais funcionando, sabe me dizer o por que?

[@_alicest]

Oiii!! vim tirar uma dúvida. Quando eu clico no botão do tipo submit não acontece nada e eu coloquei no form o action="salvar.php" para salvar no banco. Então vim vê se alguem q testou esse cod funcionou salvando no banco dados :/. E esse mesmo salvar.php funciona se eu colocar no botão inves de button para input, mas o script não funciona.

[@rogeriokk]

Moça, tive o mesmo problema e fui pesquisar sobre. Acontece que o 'event.preventDefault( )' impede o envio do formulário, mesmo que as validações sejam bem-sucedidas. Isso significa que o formulário nunca chega ao backend. Para corrigir, você deve garantir que o 'preventDefault( )' só seja usado se houver erros de validação. Eu fiz isso atráves de uma estrutuda de decisão if else. Exemplo form.addEventListener("submit", (event) => { validarNome(); validarEmail(); validarSenha(); // Se todas as validações passarem, o formulário pode ser enviado if (document.querySelectorAll('.span-required[style*="block"]').length === 0) { form.submit(); // Envia o formulário } else { event.preventDefault(); } }); Espero ter ajudado!

[@danielfrausino7596]

O mano faz um vídeo mostrando como faço pra caso se a senha for valida me direcionar para o meu site por favor 🙏❤️

[@Vini-xe1dc]

A validação funcionou perfeitamente mas o event.preventDefault(); não deixa meu formulário ser enviado mesmo com todos os campos preenchidos corretamente, o que eu faço?

[@GustavoNeitzke]

Opa Vini! Exatamente, com o preventDefault os dados do formulário não são enviados, logo você precisa fazer um envio dos dados diretamente no JavaScript, pode utilizar um axios, fetch,...

[@Vini-xe1dc]

@@GustavoNeitzke Então o meu insert feito em PHP não vai mais funcionar se eu usar essa validação? teria que fazer o insert no banco utilizando o javascript? sou iniciante em javascript e não entendi muito bem, pensei que esse código faria somente a validação e o meu código php seria responsável por enviar os dados para o bd, já que o crud funciona se eu retirar o preventDefault :(

[@lucianooliveira5809]

​@@Vini-xe1dc Opa, não sei se vai servir pra vc, mas aqui eu consegui contornar esse problema da seguinte maneira. Dentro da função anônima, ao invés de deixar o prevent.default "solto", eu coloquei ele (e a função de validação) dentro de um if, mudei o evento de submit pra click e add o evento no botão e não no form, assim: btn.addEventListener('click', (event) => { if(email.value == '' "){ event.preventDefault(); emailValidation(); } });

[@alexandremarciliocruz67]

O meu código dá erro na função comparePassword eu coloco o seu código igualzinho no sublime e executo e o navegador apresenta erro no value dos campos[2].value e campos[3] não consegue encontrar o value para os campos O restante do código foi de boa

[@shxgamer3028]

Alguém tem o código inteiro para me dar? do html e js

[@_opredolive_]

Mas como que envia dps?

[@LM_Producoes]

Qual o link do repositorio para poder pegar o link do regex?

[@shxgamer3028]

Aqui caso ainda precise /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

[@mateuscosta1269]

nao consigo "enviar" os dados. Mesmo os dados nos inputs contendo os criterios de validação, o botao enviar nn os envia. Como resolvo?

[@ViaAutodidata]

Opa, descobriu? estou com o mesmo problema...

[@nandorace]

Faltou no submit colocar a função no textarea e no type radio

[@JoaoVictor-jg6dc]

O que esse index faz? Como, por exemplo, na função setError(index)

[@paulovictorrodrigues5994]

Quando ele deu um querySelectorAll pelo que entendi, ele cria um array dos inputs. Cada input tem uma posição que vai de 0 a N. Quando ele chama a função setError(0) ta pegando a posição de um determinado input. O index entre parenteses é um parâmetro, você pode escrever qualquer coisa ali para referenciar que vai entrar algum dado tipo function setError(dado). Ele colocou index pois é comum essa palavra para referenciar arrays,

[@renanclemonini1844]

como faz para remover o event listener e permitir que ele aceite fazer o envio do formulário?

[@ViaAutodidata]

Opa, descobriu como faz? estou com o mesmo problema...

[@conhecimento3944]

Opa mano ótimo vídeo, tenho uma dúvida, este ultimo código form.addEventListener('submit', (event) => { event.preventDefault(); validarNome(); validarEmail(); validarSenha(); compararSenha(); }) está bloqueando meu formulário ao clicar em submit para meu banco de dados, tem como me ajudar?

[@ViaAutodidata]

Fala mano, descobriu como resolve? estou com o mesmo problema

[@guilhermemillersilva6016]

Estou tentando fazer para telefone mas não estou conseguindo

[@peter8796]

cara, no caso eu ja to com meu projeto conectado ao banco, so que quando eu clico para enviar o formulario nao acontece nada, e tbm nao salva, alguem sabe me dizer oque eu faço?

[@paulovictorrodrigues5994]

Remove o e.preventDefault() do seu script e no botão no html coloca propriedade type="submit"

[@blockfolio8225]

Cara e pra enviar voce ensinou a validar e depois de validado nao envia lol!

[@GustavoNeitzke]

Olá amigo! Já ensinamos isso no canal. Aprenda como ligar um FORMULÁRIO com BANCO DE DADOS #01 kzbin.info/www/bejne/h4DIdXhto7V3p5I

[@denilsonnunes1745]

Faltou só a validação dos campos do tipo checkbox e radio

[@timoteosilva3603]

COmo vocÊ aprendeu tudo isso? kkk Quero fazer um curso

[@GustavoNeitzke]

Buenass! Agora temos um curso de HTML e CSS na neitzkeacademy.com/geral/courses/1536bddf-8bc8-4dbf-bbad-cde5e136e1c0

[@peter8796]

como que faz o botao do submit funcionar e salvar as informações, pelo amor de Deus kkkkkkkkkkkk

[@lucianooliveira5809]

Eu consegui contornar esse problema da seguinte maneira. Dentro da função anônima, ao invés de deixar o prevent.default "solto", eu coloquei ele (e a função de validação) dentro de um if, mudei o evento de submit pra click e add o evento no botão e não no form, assim: btn.addEventListener('click', (event) => { if(email.value == '' "){ event.preventDefault(); emailValidation(); } });

[@et_gigii]

EU ODEIO JAVASCRPT