fala Turma seja muito bem-vindo a mais um vídeo aqui no canal e hoje você vai aprender de uma vez por todas a criar um formulário passo a passo simbolizando aí um formulário de cadastro de um site onde a gente vai ter vários intuitos aqui a gente vai aprender desde o extremo zero desde todo o HTML todo CSS a estilização a responsividade também e claro todos JavaScript como manipular os eventos manipular também acesso a Dom como que a gente vai pegar os elementos e fazer as validações do formulário tudo passo a passo aqui então primeiro né
vamos conhecer aqui o formulário então simbolizando aqui um cadastro né de um site de uma página aqui digitar aqui sujeito mesmo vou digitar que teste @test.com perfeito vou digitar a senha aqui 1 2 3 1 2 3 e vou digitar uma senha diferente aqui na confirmação se eu der enviar aqui você vai ver que ele vai dar dois erros já para mim né então a senha aqui precisa ter no mínimo 8 caracteres Então vou colocar aqui um dois três um dois três um dois três então tem mais e vou dar aqui ele vai falar olha
agora a senha não são iguais Então deixa eu colocar a senhas iguais um dois três e perfeito ele vai enviar o formulário que por enquanto a gente colocou um alerta Só se eu der um ok maravilha ele para todos os erros né ou se eu vir aqui outra coisa bem legal se eu apagar aqui o e-mail né e eu clicar fora do campo de e-mail ele vai falar que o campo é obrigatório Porque agora não tem mais e-mail lá dentro então a gente tirou o e-mail ele tá falando ali que é obrigatório Então posso daqui
um teste @teste.com novamente e ele vai parar de dar o erro e aqui no nome do usuário também né ser digital o nome do usuário ou se eu apagar aí para fora ele vai falar também que o nome do usuário é obrigatório Então a gente vai fazer várias validações aqui tanto em tempo real quando o usuário estiver digitando a gente vai fazer tanto também quando você clicar né seu editar alguma coisa aqui por exemplo clicar em enviar e ele vai fazer as validações também então ele vai fazer aqui da senha por exemplo assim iguais se
elas não são iguais e também ela tem os caracteres que a gente passar Então bora lá bora começar a criar esse projeto aqui vou abrir o meu vs code pra gente fazer junto aqui vamos lá então pra gente começar aqui eu já estou aberto no meu vs Cold eu vou clicar aqui com o botão direito tô dentro de uma pastinha já vou clicar aqui no Fire index. vou criar aqui também o new file style.s e vamos dar um New Fire também script.js para a gente já deixar todos criados aqui tá dentro do nosso HTML a
gente vai clicar aqui um exclamação tá e ele vai dar um emment aqui do próprio vs code sugerindo só para a gente criar um arquivo inicial do próprio HTML então a gente dá um enter aqui vou fazer até de novo aqui para vocês Exclamação dá um entra aqui e ele vai criar então vou criar aqui o título vai ser novo usuário tracinho sujeito programador aqui então se eu salvar aqui agora pra gente rodar esse projeto aqui no nosso navegador eu vou instalar aqui uma extensão tá recomendo também Live server aqui então essa extensão só para
a gente rodar em tempo real então a minha já está instalada clica para instalar aí e aí você pode vir aqui ó nos seus arquivos vim aqui no index e o botão direito Open wafer Live server e ele vai abrir aqui ó o seu navegador como se fosse um servidor então se eu voltar aqui no meu Body e a gente colocar aqui por exemplo uma Dive dentro da dívida eu quero colocar por exemplo um h um teste dá um ctrl+s para salvar ele já atualiza aqui ó em tempo real Então já aparece pra gente assim
que a gente tem que ficar dando F5 aqui então é bem melhor segunda coisa vamos pegar uma fonte para não ficar essa fonte feia aqui vou procurar aqui Google Fontes Opa Fontes aqui E aí vou dar um espaço vou pesquisar por Pops eu gosto dela ou robô também Então a primeira opção aqui do Google fotos a gente pode abrir aqui deixa eu remover que eu tenho algumas selecionadas então aqui na pop a gente pode vir para baixo eu quero pegar aqui por exemplo a nossa regular que é a padrão vou clicar no mais vou pegar
mídia também e vou pegar a boa dica de bold bold aqui select também e aí a gente pode vir aqui ó pegar através do link então copia que o link vamos voltar aqui dentro da nossa tag de head embaixo Aqui do meta em cima do title vou dar um control V ele vai colar aqui o Import da fonte que a gente selecionou que é a pop Beleza agora então a gente pode utilizar lá no nosso CSS então para a gente chamar o nosso arquivo de estilo a gente precisa chamar o nosso link então para isso
a gente pode vir aqui embaixo depois dos nossos imports ainda dentro da nossa tag de head a gente vai trazer aqui também um link real abra aqui tá eu Fecha aqui ele mesmo e para esse cara a gente vai passar agarraft onde que tá o caminho então ponto barra Style SS que é o caminho do nosso estilo Então vou salvar aqui e para a gente fazer um teste já a gente pode salvar vim no nosso estágio já até aqui do lado menorzinho aqui para a gente para a gente poder ir vendo aqui do lado reduzir
aqui também perfeito e aqui dentro então a gente pode configurar o reset do CSS né o reset do CSS porque quando a gente começa um projeto sem passar nenhum estilo você pode ver que a própria H1 H2 ele tem um estilo padrão Você tá vendo que ele tem um espaçamento ele tem um espaçamento em cima também e essa fonte também a gente não quer então a gente pode vir aqui no nosso Style aqui no nosso eleitor global no nosso asterisco vou falar que a gente vai utilizar o box sizen border Box tá vamos a margem
zero a gente zerar a margem pede zero também você pode ver aqui ó por padrão já Zerou a margem e impede fonte Family também eu vou usar a nossa Pops e aí caso ele não encontre vírgula aqui então vou salvar Vou atualizar já pegou a nossa fonte está bem mais bonita agora e depois disso né o nosso Body ou Eu quero um background aqui para ele hashtag 1212 que é a cor do nosso exemplo show de bola vou passar o elefante 100% também quero passar aqui um display Flex e agora vamos alinhar tudo no centro
porque aquele nosso exemplo era tudo nosso formulário alinhado no centro então justifique Center a gente alinhar ele aqui na parte horizontal no centro e também a itens Center também para a gente alinhar aqui só que ele não pegou Por que que ele não pegou porque ele não sabe o tamanho da altura da página então ele não sabe qual lugar ficar então eu vou falar que a nossa altura vou ter que colocar aqui embaixo a nossa mínima altura é de 100vh ou seja sem VH é 100 View High aqui ou seja o tamanho do navegador aqui
do usuário do documento tá então já pegou já tá Centralizado no nosso teste aqui no meio perfeito maravilha a gente pode começar então aqui no nosso HTML a gente pode até deixar essa de Vamos colocar aqui uma Class na M container pra ela tá nessa dívida aqui a gente pode criar mais uma dívida que vai pro header do formulário eu vou trazer aqui ele um H2 mesmo que vai chamar nova conta perfeito essa dívida eu vou dar aqui uma Class vou chamar ela aqui de reader Ou a gente pode até em vez de dívida aqui
chamar de section pode ser uma sessãozinha dentro desse nosso formulário perfeito Então já tá aqui ó nova conta agora embaixo dessa sétima ainda dentro do nosso container a gente pode criar o nosso formulário que é onde vai ter os nossos Campos inputs aqui então aqui dentro a gente pode criar famosa tag aqui de forme dentro da tag de forma a gente vai ter cada cama para isso eu vou dar aqui até para ela um ID chamar lá de fome e vou dar aqui uma Class name para ela de forma também para a gente poder utilizar
depois aqui dentro eu vou ter uma dívida para a gente separar cada campo então cada controle de Campo primeira dívida aqui vou dar aqui uma cless name para ela forma contente vai ser um conteúdo do formulário e a gente pode chamar primeiro que a Label Label aqui primeira vai ser four e username e ela vai ser por exemplo nome do usuário perfeito e embaixo dessa lei a gente vai ter de fato o campo pro usuário digital então aqui dentro a gente vai ter o Type do campo vai ser tipo teste mesmo o ID vai ser
usernem para a gente conseguir filtrar depois lá no Java Script o Place holder né quando não tem nada digitado digite o nome do usuário três pontinhos aqui então se eu salvar ó já tá o carinha aqui e agora aqui que falta aqui embaixo eu ainda quero deixar a mensagem de erro que apareça quando usuário é preencher alguma coisa inválida Então vou colocar aqui Um textinho uma Âncora aqui eu vou chamar aqui de aqui vai a mensagem de só para a gente visualizar beleza vamos utilizar só esse aqui primeiro pra gente ver então vamos primeiro começar
aqui pelo contêiner que a gente não fez então vamos no estilo a gente pode vir aqui no nosso ponto contêiner se a gente pensar no container Quem que é o container é o container que vai englobar toda a nossa aplicação aqui então dentro a gente tem um reader do formulário e tem de fato formulário com os campos tá então aqui a gente vai fazer o quê a limitação do fundo a gente vai passar Qual que é o tamanho máximo Então um background color por exemplo eu quero que seja fa fa perfeita você pode ver que
já pegou deixa até diminuir pegou já tudo fundo aqui eu quero dar um border de 14 pixels para ficar um pouquinho arredondado eu quero que a margem seja 14 Pixel em volta eu quero que a Max Weber seja de 600 pixels só que eu quero que ele use sempre 100% dos 600 pixels então quer dizer o quê que se ele tiver maior tá maior aqui ele vai no máximo ter 600 Pixel que é o que a gente passou agora se ele diminuir menos que isso ele vai usar porcentagem ele vai usar então que a largura
vai ser 100% do que ele conseguir Mas no máximo 600 Pixel então se eu diminuir aqui ó ele vai continuar sendo responsiva perfeito ele quebra pra linha de baixo aqui e continua sendo responsivo e não fica é aquela barra de rolagem aqui beleza então maravilha o próximo passo aqui então eu vou dar aqui um box Shadow aqui pra ele fizeram de uns três tem que ser um aqui e cinco Pixel E aí eu vou passar a cor né Então quero que seja um rgba zero Zero Só que eu não quero tão forte Então vou dar
aqui 1,0.5 aqui deixar um pouquinho aqui o próximo passo é o nosso reader então o ponto Rider Quem que é o nosso Rider O header aqui então ele é o que tem um H2 que vai ser o nó aquele títulozinho do que que é o formulário então o Hydra aqui a gente pode passar então um background a gente tem um linear gradent então linear gradget aqui eu quero passar 120 Dead vírgula Qual que é a primeira cor #3acbf0 que a cor que eu separei que é um azul ali legal 0% então ele vai ficar no
começo vírgula aqui é outra cor 8 BB 0 FF e 100%. Opa 100%. vamos salvar para a gente visualizar então Maravilha 120 dega Quanto que você quer botar acionar Se fosse por exemplo 90 degrau ele ia rotacional vou aumentar aqui o tamanho pra gente poder visualizar isso aqui melhor então vou passar aqui que o padding dentro dele vai ser 24 Pixel em todos os lados Então se a gente passar 90º ele vai ficar exatamente em diagonal a gente passar por exemplo ó zero aqui ele colocar de cima para baixo esse nosso efeito do Gradiente se
a gente passasse 190 graus ele vai ficar virado 190 graus ou eu vou passar um 120 só para a gente alinhar aqui da forma que a gente quiser esse efeito aqui do Gradiente beleza Texas para centralizar o nosso texto e a color dele vai ser branca também então perfeito Agora falta aqui a parte de baixo só que agora a gente viu que a parte de cima desse nosso reader ele não ficou com o border radios eu poderia alinhar sua borda de cima ou eu posso vir no nosso container falar para ele ter um overflow hiden
ou seja tudo que tiver passando Desse nosso container aqui ele vai esconder então ele mantém a nossa borda aqui ó agora a gente pode voltar aqui falta então o nosso forno contente e cada input aqui então vamos lá embaixo ponto forme aqui primeiro vou dar um espaçamento de padding interno de uns 18 pixels.form traz contente a gente vai passar aqui para ele uma margem botam de oito Pixel para ele pede botam também de 18 tem que ser elemento do Farm contente e a posição position vai ser relativa tá agora a gente precisa alinhar que um
seja embaixo do outro então posso vir aqui falar também para o nosso ponto forma contem acessar o nosso Label aqui e o display dele vai ser inline Block e a margem botton aqui para ele vai ser de quatro Pixel aqui pontont acessar a cada input aqui vou falar para ele ter um display Block com isso então ele vai descer para linha de baixo e agora a gente pode falar o tamanho aqui que eu quero para ele eu quero então de 100%, eu quero ter também aqui pede de oito Pixel interno border dois Pixel Solid DF
DF DF que é uma cor um pouquinho mais escura ali do cinza e aí a gente já tem aqui o nosso input aqui para poder digitar agora falta aqui onde vai aparecer a mensagem de erro né então a gente pode ver aqui embaixo pronto fome contente acessar o nosso a vou dar uma position para ele absoluta vou descer ele um pouquinho né então eu vou dar aqui de menos 8 Pixel vou descer um pouquinho mais aquele para baixo se eu desse mais aqui ó 82 ele ia descer lá para baixo até escondeu né Vou colocar
aqui por exemplo 20 ele desce mais mas menos oito só apareceu um pouquinho aqui para não ficar grudado no nosso input left sempre grudado no zero vizinho aqui a gente vai passar Hidden para eles esconder mas antes da gente esconder eu vou até comentar aqui para deixar ele pra gente mudar a cor dele primeiro e depois a gente esconde porque ele só vai exibir quando de fato dar erro Então vamos continuar acessar o nosso botão aqui e aqui dentro então a cor né então um background color 00 C3 FF que é a cor que eu
separei pra gente e a cola dentro de branco só que faltou a gente colocar o botão né porque a gente só colocou um input Então vamos lá fazer vamos ver aqui no nosso formulário a gente tem o nosso formato content aqui dentro e o input dele só que agora isso aqui a gente vai ter mais né Então olha como fica fácil aqui a gente pode copiar essa dívida de forma contra dentro do formulário eu vou colar de novo agora e ver se o Enem pode ser por exemplo nome aqui a gente vai mudar o Label
para e-mail e aqui então o nosso input de teste eu vou mudar o ID para e-mail posso mudar o Type também para e-mail se eu quiser perfeito e aqui no place holder Digite o seu e-mail Maravilha e aqui vai a mensagem de erro a gente continua por enquanto então se eu salvar já temos aqui também vou copiar mais uma vez a gente vai ter que então o próximo que vai ser o senha o for aqui do Label a gente precisa mudar para pastor aqui o nosso input eu vou usar aqui o Type password mesmo o
Wide vai ser Pastor e o Place holder é Digite sua senha beleza maravilha vou copiar aqui que falta mais um né então falta aqui agora o confirmação de senha e aqui o nosso for eu vou mandar aquele para Peter traço conformation e o Type aqui continua pastor Wide aqui vai ser confirmation também digite aqui sua senha novamente Beleza então vamos conferir então a gente copiou ele aqui várias vezes primeiro aqui começando pelo username então username do Label aqui a gente tem um input que tem um audioser name e aqui embaixo a gente tem então o
four do e-mail a leibol dele o input email também aqui para baixo a gente vai ter então Label da senha que a gente colocou o for pastor do lable o nosso input também a gente chamou aqui no Type pastor e uma depecher para ele e no de baixo a gente colocou password com formation aqui do nosso lable E também o input dele é o mesmo Idi tá então pastor confirmation aqui agora falta o botão né então aqui embaixo aqui dentro do forme botão cadastrar e a gente pode passar aqui o Type desse botão aqui Type
vai ser do tipo submet né já que a gente tá dentro de um formulário eu posso usar o Type summith aqui para submissão desse formulário então agora vou salvar isso aqui tudo vamos voltar aqui no nosso estilo agora pra gente continuar então agora a gente tem o nosso botão que na verdade ele tá dentro do ponto fome então já tem o nosso botão aqui a gente pode passar que é o dele vai ser 100% Border vídeos 14 pixels pede interno de 10 Pixel aqui show de bola border zero aqui porque eu quero tirar essa borda
que eu não quero essa borda exibindo tá fonte size aqui 16 Pixel para dentro aqui cursor Pointer para ter aquela mãozinha eu posso dar um espaçamento então margem top vou passar aqui uns 14 Pixel para desgrudar Maravilha Agora falta a gente arrumar as mensagens de erro né então a gente pode criar uma classe aqui ponto for traço contente ponto erro e dentro dela a gente vai manipular dentro do input que eu quero mudar border traço color por um vermelho então ff3 B 25 Maravilha e também eu quero criar uma classe ponto traço contente ponto error
só que agora acessar o nosso a e o nosso A então eu quero mudar a cor também então color deixa eu pegar a mesma cor aqui que vai ser esse vermelho aqui então essas duas classes aqui a gente vai aplicar Apenas quando o usuário dá erro quando a gente quiser exibir um erro então aqui dentro o que que a gente precisa fazer a gente utilizar essa classe aqui deixa eu voltar aqui para cima vou colocar eu aqui em cima para a gente utilizar essa classe aqui a gente precisa vir aqui então ao invés do forme
contant a gente acrescenta aqui a palavra erro por exemplo então aqui no Exemplo né confirmação de senha eu coloquei esse erro na frente do formato se eu salvar aqui você pode ver que agora olha que legal a gente já tem aqui então o nosso input aqui com a bordinha vermelha e também o texto da mensagem que ficou vermelho Então é isso que a gente quer só que claro isso a gente vai fazer de forma dinâmica Então esse error aqui na frente essa classe que a gente acabou de criar aqui ela só vai aparecer de forma
dinâmica quando der um erro através do Java script a gente vai exibir essa classe ou tirar essa classe Então essa classe não vai começar ativada então para isso que a gente vai fazer agora vamos voltar aqui no nosso a e eu vou passar aqui a visibilidade hiden aqui para ele então vou salvar com isso Ó vou voltar aqui no meu HTML vou tirar o error também né porque a gente só vai colocar o erro quando de fato usar alguma coisa errado então se eu salvar também e eu vou atualizar a gente já tem aqui todo
pronto o nosso formulário né nome e-mail senha e confirmação perfeito agora bora pro java script fazer a manipulação dos eventos aqui então vamos lá Vamos diminuir e vamos aqui criar o nosso script então aqui embaixo a gente precisa ligar com o nosso arquivo de script aqui dentro do HTML então para isso antes do fechamento da tag do Body eu vou criar aqui uma tag de script abre e fecha ela aqui src e para ela eu quero passar Então qual que é o caminho do arquivo ponto barra script.js então se eu salvar aqui e eu vier
aqui no meu script e ao deck um alerte teste só pra gente ver e eu salvar ó já apareceu o teste aqui seu atualizar de novo já apareceu o nosso teste Então já tá chamando aqui o próximo passo que a gente precisa entender pegar o relacionamento de cada input para mim conseguir ter acesso ao que você digitou em cada input aqui beleza então para isso a gente pode vir aqui em cima concha forme igual a doc me to acessando documento Mateus Quem que é o documento no nosso Dom Opa vamos lá o documento e nada
mais é do que acesso a isso aqui ó a nossa página tá então manipulação no nosso documento a nossa página document ponto quem que eu quero eu quero get Element byed então eu quero pegar algum elemento pelo id a gente olhar no HTML eu tenho alguma ideia aqui tenho eu quero primeiro pegar o elemento do nosso formulário então de forma forme perfeito agora a gente vai fazer isso para os demais Então conte e username igual a doc me.gat Element byed eu quero pegar também ó se a gente conferir para o user name a gente chamou
o White para ele de username Então vou duplicar aqui para ficar mais rápido tá o próximo vai ser o e-mail de e-mail vou duplicar de novo a gente vai ter então o pastor que vai receber então o nosso elemento por último a gente vai ter aqui com formation ou até password com formation e aqui embaixo o nosso ID dele também então se a gente lembrar o e-mail tem um e-mail o pastor tem o ipastor pastor confirmation tem uma dica aqui ó pastor traço com fermento eu vou até pegar e vou colocar aqui para não escrever
errado beleza então aqui a gente pegou o relacionamento né pegamos a referência de cada dia agora o que que eu quero fazer a gente vai criar aqui um fome ponto eu quero colocar um evento dentro do nosso formulário que tipo submet vírgula aqui a gente recebe o nosso evento e como é um evento do tipo San Beach a gente recebe um event né o evento do próprio submith então eu quero prevenir o comportamento padrão para a gente não atualizar página e não tentar enviar para nenhum lugar esse formulário Ivete ponto Privê and the fold para
a gente prevenir esse comportamento padrão e eu vou dar aqui um alerte cadastrado com sucesso então se a gente salvar aqui e eu clicar aqui em cadastrar cliquei cadastrado com sucesso perfeito agora a gente pode começar a brincar né a gente pode fazer as validações então o primeiro passo eu quero fazer uma avaliação do nosso e username nome do usuário então para isso a gente pode vir aqui vou criar uma faixa vou chamar aqui de Jack input e username a gente faz as validações só name aqui desse intuito então aqui dentro a gente pode pegar
o valor que o usuário digitou acessando a referência aqui ao nosso input então vou chamar aqui de user name velho igual a username então tô acessando a referência do impulso que a gente pegou lá do elemento E username com isso a gente consegue pegar o que o usuário digitou se a gente colocar um console ponto log aqui para a gente fazer um teste e user a gente consegue ter acesso então eu vou salvar vou chamar ele para ser executado Quando você clicar no botão cadastrar eu vou tirar esse Alerta daqui vou chamar o nosso check
input e username vamos fazer um teste vou salvar vou abrir aqui o nosso inspecionar vou trazer aqui o nosso console deixa eu até dar um F5 aqui isso aqui é um aviso dos Campos de 100 aqui a gente não precisa se preocupar vou dar uma limpada Vou digitar aqui então sujeito teste cadastrar e olha que legal seu jeito teste Então já tô pegando Que o usuário digita aqui através dessa variável e username vela e aqui eu quero fazer algumas validações né então eu quero vir aqui e se o username e username for igual a uma
string vazia quer dizer que usaram nada e aí eu quero então mostrar o aviso e mostrar a mensagem de erro né a gente quer fazer isso aí para isso como a gente vai se repetir aqui embaixo no e-mail aqui embaixo na senha e na confirmação também a gente pode criar uma função que vai ficar responsável só por exibir o erro e a mensagem que a gente quiser então eu posso criar fora dessa função uma outra função aqui por exemplo vamos chamar aqui de erro input tá esse error input eu quero que você me passe Qual
que é o elemento Então eu quero que você me passe o input por exemplo e eu quero que você me passe a Messenger que você quer exibir a mensagem que você quer exibir e aqui dentro a gente pode pegar esses caras e trabalhar e exibir aqui Então conte fome item igual a input só que se eu acessar dessa forma eu vou estar acessando exatamente o input aqui mas eu preciso mostrar a nossa mensagem de erro se a gente lembrar é Nossa dívida e não no nosso input para mim ativar a nossa classe de erro eu
preciso aqui no nossoforme contente acrescentar a classe erro ó se eu salvar aí ele vai exibir aqui então eu não posso acessar e colocar uma classe aqui na no nosso input eu posso colocar uma classe nesse nosso cara que a gente passou que é no nosso forma contente e ele é o quê desses elementos O que que a Dive é desse input aqui ela é um pai então a gente tem aqui no java script também um elemento chamado ponto aqui tô acessando o input mas eu quero acessar o pai dele a gente pode acessar o
powernt Element então parent Element aqui dessa forma cuidado tá com os minúsculos e maiúsculos Como por exemplo o elemento aqui o e maiúsculo tá então agora conste Tech Messenger igual a item ponto selector quero pegar quem agora eu quero pegar a nossa mensagem então dentro aqui do nosso forno content eu tenho aqui esse itenzinho aqui que a gente pode a Então vou pegar dentro do nosso forno content a referência desse item aqui para a gente colocar a mensagem aqui dentro onde tá exatamente aqui vai a mensagem então eu quero pegar a referência do nosso a
que a nossa âncora e agora eu vou adicionar então teste messenger eu vou passar a message que você me mandar Beleza eu vou exibir a mensagem lá dentro e também for item ponto Class name vai receber aquela classe que a gente precisa então maravilha agora a gente pode usar essa função então aqui embaixo no nosso usernamental se for igual vazio eu vou fazer o quê eu vou chamar o nosso error input vou passar o nosso input que a gente precisa para ele então vou passar aqui para ele o username que é o nosso input e
a mensagem que você quer exibir caso caia nesse erro por exemplo preencha um user name ou user name é obrigatório a gente pode colocar também vamos fazer um teste então eu vou salvar aqui novamente se eu voltar e eu atualizar aqui vou clicar no YouTube se eu digitar alguma coisa e clicar aqui para cadastrar ele não vai mostrar nada porque tá preenchido agora se eu apagar aqui E tentar cadastrar cliquei Olha que legal ele já ficou aqui vermelhinho né só faltou exibir a nossa mensagem por que que ele não exibiu se a gente voltar aqui
no nosso style.s a gente passou que essa mensagem ela tem o visual heiden ou seja ela escondida e quando a gente utilizar a nossa classe error aqui dentro do a eu quero passar aqui agora ele vai ser visível ele visual ou seja ele vai ser visível na tela quando tiver a nossa classe de erro aí ele vai exibir senão se ele não tiver aí ele vai exibir como heiden ou seja ele vai esconder o nosso elemento aí então se a gente voltar agora aqui no nosso script e eu salvar Vou atualizar aqui de novo e
olha que legal né não tem nada seu digitar alguma coisa clicar perfeito tô digitando se eu não digitar e eu tentar clicar em cadastrar ele vai falar que tá vermelho aqui e preencha um newser name perfeito agora vamos fazer os demais então vamos lá embaixo agora que a gente já viu a gente pode reaproveitar essa função que mais que tá faltando aqui de validação do usernamers eu quero que ele seja obrigatório caso usuário não digite nada aí eu quero exibir só que se o usuário digital alguma coisa e eu clicar em cadastrar ele ainda continua
aqui então se você digitar alguma coisa clicar em cadastrar eu quero tirar essa mensagem aqui vermelha não faz sentido né então a gente pode criar aqui um Élcio ou seja querendo dizer que se não estiver vazio Beleza então a gente vai ver aqui vai dar um conte for item igual e username ponto powernt Element E aí eu vou sem aquele erro então se eu salvar agora a gente digitar alguma coisa e clicar ele quebrou Nossa aplicação porque eu escrevi errado né então é forma e traço contente Agora sim então vou salvar novamente se a gente
digitar alguma coisa clique em cadastrar perfeito se eu apagar aqui deixar vazio e eu clicar em cadastrar preencha um ilsername se eu clicar e cadastrar aqui de novo e clicar em cadastrar ele já sai o aviso maravilha agora vamos fazer para o nosso e-mail né então vamos aqui funk e-mail maravilha vamos criar aqui com e-mail velho igual e-mail então peguei aqui o nosso e-mail que a gente amou e peguei o valor dele exatamente como a gente fez aqui com o nosso input agora a gente pode fazer as validações E se o e-mail velho for igual
a vazio eu quero fazer a mesma coisa então vou dar um erro input vou passar o nosso e-mail que é o nosso input,a eu quero passar também com a mensagem ou e-mail é obrigatório senão senão a gente pode dar a mesma coisa que a gente fez aqui ó vou até copiar então caso ele tenha preenchido alguma coisa a gente coloca classe normal e tira de erro mesma coisa que a gente fez aqui no nosso username só que aqui no user name eu percebi que ele completou até errado aqui a gente precisa dar um fórmula item
ponto Class name para a gente só manipular mesmo o nome da classe só quero mudar o nome da classe para esse forma content agora agora a gente precisa para o nosso de senha vamos lá function vamos lá a gente pode criar aqui um constrovelo e aqui e aí a mesma coisa né primeira verificação Vale for igual a uma string vazia A gente vai dar então erro input passando o nosso pastor a senha é obrigatória Beleza agora é os it agora a gente pode fazer a comparação do tamanho por exemplo da senha se o seu pastor
valuense por menor que 8 eu quero então falar que também não é possível então vou colocar aqui o nosso error passando no nosso pastor mas eu vou mudar aqui a mensagem vai ser a senha precisa ter no mínimo 8 caracteres Beleza vou colocar o acento aqui Maravilha e agora caso não caia nenhuma dessas então elas quer dizer que ele digitou então alguma senha e é maior que 8 então aqui nesse Élcio a gente vai dar um const eu vou manter a classe sem erro então for item.class name igual a forme traço contente vamos testar esses
dois que a gente criou então para a gente vem aqui em cima no nosso check input e-mail Vamos lá em cima Jack inputter também a gente vai passar vamos salvar para a gente testar então quando a gente clicar em cadastrar ele vai fazer as validações tanto de usar nem e-mail e pastor então vamos aqui Vou atualizar então seu digital alguma coisa teste @teste.com ah sim eu vou deixar em branco cliquei e olha que legal assim é obrigatória Agora se a gente digitar uma senha aqui vou colocar um dois três só colocar uma senha fraca e
cliquei a senha precisa ter no mínimo 8 caracteres maravilha se a gente não digitar um e-mail e eu clicar o e-mail é obrigatório também Beleza então aqui a gente já fez duas avaliações já fizemos aqui dos nossos então se eu clicar ele vai dar erro as três aqui falta a confirmação né então vamos lá embaixo e aqui no nosso abaixo aqui posso até copiar esse cara aqui que vai ser parecido vamos aqui no nosso colar aqui Jack e input com formation e aqui a gente vai primeiro pegar também o valor que você digitou na senha
porque eu preciso saber a senha para fazer a comparação e vou pegar também com formation password very igual a password com formation ponto velo aqui que é exatamente a referência que a gente pegou para acessar esse input de confirmação a gente acessa esse pastor confirmation que é o que eu chamei ponto vela para a gente pegar o que você digitar lá dentro e agora a gente pode fazer as comparações então Vou até apagar isso aqui pra gente fazer do zero então formation pastor for igual a vazio então mais string vazia A gente vai dar aqui
então chamar ela vou passar então o seu pastor confirmation que a gente vai passar o nosso input então a gente passa aqui o input para ele que eu chamei de password confirmation a confirmação de senha é obrigatória beleza perfeito e a gente pode dar aqui também elsea e o conformation very ou seja se o confirmation pastor value for diferente do que você digita na senha mesma coisa que a gente digitar aqui um dois três um dois três e a sua senha digital apenas um dois três a senha são diferente então se elas forem diferentes eu
vou chamar também um error input passando nosso pastor confirmation que é o nosso input,vou passar aqui então as senhas não são iguais Beleza agora senão então Élcio aí posso validar Então conte for item igual a pastor com formation eu vou deixar a classe sem o erro então for traz content aqui mole mole agora a gente pode chamar ele para ser exibido também Opa Então vamos lá vou clicar aqui vamos chamar aqui também ó nosso Ed event listenner então se eu salvar aqui só para a gente testar salvei e vamos fazer os testes aqui antes da
gente fazer a validação final que já tá muito massa Então se a gente atualizar nome do usuário teste
[email protected] vou digitar sem um dois três e aqui eu vou digitar confirmação um dois três um dois três cliquei Olha que legal né a senha precisa ter no mínimo 8 e assim não são iguais então um dois três um dois três um dois três se eu clicar agora tem oito dito só que as senhas não são iguais então um dois três um dois três um dois três agora é igual cliquei aí ele sai o erro Maravilha pra
gente finalizar isso aqui a gente precisa fazer uma validação final porque por enquanto a gente tá mostrando os avisos os erros você vai apagar aqui clicar ele só que ele continua enviando né se eu colocasse aqui um alerte por exemplo formulário formulário enviado com sucesso ele ia continuar enviando então se eu salvar e eu voltar e eu clicar aqui por exemplo em cadastrar ó formulário enviado mesmo que ele dá todos os erros Então eu preciso agora Fazer uma avaliação que caso esses erros aconteçam se você tentar enviar e tem algum erro na tela eu não
posso deixar passar eu tenho que barrar o usuário agora se não tiver nenhum erro aí eu posso deixar seguir E para isso a gente pode criar mais uma função para a gente fazer essa validação final Então vou vir aqui embaixo fora do nosso Jack empute peças com formation vou chamar aqui de Jack forme e aqui eu vou chamar de fato aquelas validações Então vamos lá vou vir aqui vou tirar aqui essas validações que a gente tinha colocado diretamente no submit vou trazer elas aqui para baixo dentro do nosso checkform ó trazer elas aqui dentro show
de bola e agora eu posso fazer uma avaliação como é que eu vou saber se tem um erro na tela se a gente clicar com o botão direito inspecionar quando tem erro na tela exatamente tem essa classe aqui ó forme contant error então quando tem essa classe tem algum erro na tela então a gente pode fazer uma verificação conte for itens igual a forme ponto Carrie selector All Ou seja eu quero pegar todos os nossos elementos que ele tiver com esse elemento ponto for me traz contente então eu vou pegar todos que tiver essa classe
forme contem aqui tá dentro do nosso formulário Lembrando que a Gente Tá acessando ó o fome que é apenas dentro do formulário então acessando esse nosso ponto chitti aqui dentro dessa variável itens igual abre e fecha aqui pra gente transformar isso em uma Rei ponto ponto itens eu vou colocar aqui um console ponto log nesse is valid só para a gente ver o que a gente está recebendo então quando a gente clicar em cadastrar eu quero chamar nada mais nada menos que esse nosso checkforme aqui ó checkform aqui antes do nosso alerta porque ele vai
decidir se vai passar para enviar o formulário ou não então se a gente salvar agora a gente vir aqui no expedicionar vim no console deixa eu limpar aqui vou clicar em cadastrar cliquei e olha o que que ele aconteceu né ele me devolveu uma Rei aqui com quatro itens e cada arei tem uma dívida ali dentro então tem a primeira div tem a segunda dívida terceira que é referente a cada elemento aqui ó Tá e aí o que eu quero fazer é verificar se dentro dela a gente tem um ponto forte erro porque se tiver
eu quero então barrar o usuário se não tiver nenhuma com erro aí eu quero deixar ele seguir enviar o formulário né cadastrar o usuário então vamos aqui no nosso checkforme vamos lá e aqui no nosso itens ao invés eu posso fazer diretamente pronto do Java script ele vai verificar se toda a nossa Rei passa em alguma condição que a gente colocar então aqui dentro eu recebo uma função anônima que eu tenho acesso a cada item cada elemento tá E aqui eu vou dar um return apenas dos elementos Então se todos os elementos forem item.class name
for igual a forme trás contente se todos os elementos estiver com essa classe forme contém quer dizer que ó não tem erro se elas estiverem por exemplo forme conta de espaço erro aí quer dizer que tem alguma que tem erro Só que eu não quero então eu vou fazer esse every aqui que ele vai fazer o que ele vai passar por todos os nossos elementos vai passar no primeiro vai verificar se tá com esse forma em conta e você tá com o erro se não tiver com erro ele já passa por debaixo vai passar por
debaixo até acabar se tiver com erro ele já vai falhar isso aqui porque o ever ele tem que fazer todo nossa condição então todos os elementos tem que bater com esse clãs nem de forma contem Então se a gente colocar que o console ponto log is velho de novamente só para a gente finalizar vamos voltar aqui console vou apagar Deixa eu só salvar o código né salvar o código aqui Vou apagar aqui E vamos lá atualizar vou vir aqui vou clicar em cadastrar cliquei Olha lá que legal e deu aqui para gente ó falso porque
não porque a gente tem um erro aqui exibindo agora se eu colocar alguma coisa
[email protected] um dois três um dois três um dois três um dois três um dois três um dois três clique em cadastrar agora sim ó se eu não ok tudo tá preenchido porque eu preenchi tudo certinho e ele devolveu o truco para gente Porque de fato agora não tem nenhum erro Ah não tem nenhum formulário nenhum elemento com a classe de erro agora se eu apagar aqui por exemplo a senha clicar em cadastrar vou tirar aqui olha só já deu dois erros
e aí ele fala que é falso Então a gente tem aqui então se for válido do nosso formulário eu vou deixar seguir aí eu faço alguma coisa então vou fazer aqui por exemplo a Alert cadastrado com o sucesso com sucesso né que a gente cadastraria o usuário tá não vou salvar agora a gente pode vir aqui no nosso checkform onde a gente chama ele aqui vou tirar esse Alerta que não existe mais e Maravilha Então qual que é o fluxo que a gente está fazendo aqui para a gente finalizar com chave de ouro quando a
gente clica em cadastrar ele chama esse evento de submet esse evento aqui ele vai chamar então esse nosso check-form esse checkforme nada mais é do que ele vai ver aqui embaixo e verificar um de cada vez ele verificar um e-mail Verifique o pastor e verifica também o nosso pastor confirmation e se alguém tiver erro cada verificação pode colocar o error ou tirar esse erro também se não tiver e ele passa para ele de baixo ele vem aqui pega cada elemento e verifica olha seus elementos aqui todos eles estão com a classe forme conta ou tem
algum que tá com erro se todos estiver conforme contente ele Verifica que tá válido e né cadastraria o usuário agora se tiver alguma com uma forma contente erro ele vai falhar que E aí ele não vai entrar dentro do IF a gente poderia colocar até um alerta aqui ó por exemplo alerte preencha todos os campos corretamente mas claro é só para mostrar para vocês esse Élcio não precisa porque os erros já vai estar mostrando na tela então se eu salvar cliquei preencha todos os campos corretamente e vai mostrar os erros tá agora se eu digitar
correto digital corretamente aqui cadastrado com sucesso e pronto sai os erros da tela tá então vou até tirar esse elfie aqui porque não precisa exibir né caso não seja válido se o usuário digital alguma coisa errada e clicar em cadastrar ele já vai mostrar aqui todo o nosso aviso de erro então ficou muito legal o projeto e para você que chegou até aqui até o final eu vou fazer um plus a mais aqui antes a gente finalizar esse vídeo que pensa comigo né vamos voltar vou atualizar se eu clicar em cadastrar aquele Deu erro aqui
mas vamos supor que eu tô digitando então digitei aqui o sujeito ó digitei o nome eu queria quando eu digitar-se Ele saísse esse erro aqui ó porque se eu digitar e continuar fora ele vai ficar com erro até que eu clico em cadastrar para ele verificar cliquei aí Aqui não tem mais erro aí os de baixo ainda tem só que eu queria que por exemplo no e-mail se eu digitar um e-mail algum e-mail correto aqui beleza Esse é meu e-mail cliquei fora quando eu clicasse fora eu queria que pô já tem um e-mail já tá
certo eu queria tirar esse aviso como é que a gente pode fazer isso vamos fazer então pra gente finalizar para você que chegou até o final então vamos lá para fazer isso a gente pode voltar aqui olha que bacana vou Minimizar que minha câmera a gente pode vir aqui em cima mesmo embaixo aqui do nosso Adventista eu posso criar também um evento de quando você tirar o foco de cada input então por exemplo vamos fazer aqui para o nosso e-mail e usernem Então e-mail qual que é o tipo do evento o evento é Blur Blur
quando você tá no foco aqui Tira o foco ó cliquei fora tirei o foco bem pude então quando der bloor abra aqui o nosso evento eu quero então colocar por exemplo um cheque e-mail input tá Ou seja a gente vai fazer o cheque novamente se você tá aqui digitou alguma coisa clicou fora ele vai fazer esse cheque novamente e não só quando você clicar em cadastrar e eu também posso fazer também pelo username laser no tipo Blur vírgula abre aqui quero também chamar o cheque inputni vamos fazer agora para a gente Então vou salvar cliquei
aqui se eu clicar aqui nele e eu digitar alguma coisa e eu clicar fora continuar funcionando beleza agora o e-mail faltou né então vou clicar no e-mail
[email protected] e eu clicar fora cliquei fora você pode ver que ele saiu o erro agora e não só quando eu clicar porque porque a gente criou evento nesse né do tipo Blue Ou seja quando eu tô com foco eu estou com um tipo de foco quando eu clicar fora ele chama esse nosso event lista então quando eu clicar fora ele vai fazer o cheque novamente para verificar se tá
tudo certo então ele verifica se ainda tiver errado se eu tô aqui pagar agora e eu clicar fora ele vai falar olha o e-mail é obrigatório então muito legal então além de quando a gente digitar a rodatech.com clicar fora ele faz avaliação quanto também se eu não digitar eu posso clicar em cadastrar ele vai também fazer a validação de quando a gente enviar o formulário então ficou muito legal um formulário que parecia simples né mas a gente foi agregando bastante coisa então ficou bem bacana eu vou deixar o código para vocês completo aqui desse nosso
projeto do jeito que ficou aqui na descrição do vídeo também então se você gostou do vídeo não esquece ó deixa o seu gostei e comenta aqui embaixo Qual que é o próximo vídeo que você quer ver aqui no canal comenta aí até o próximo vídeo até mais [Música]
