ฝัง
- เผยแพร่เมื่อ 31 มี.ค. 2021
- Nesse video eu vou mostrar pra vocês uma forma muito legal de validar campos de formulário e principalmente, vou mostrar como cadastrar efetivamente um usuário sem utilizar banco de dados, apenas com o navegador e o JAvaScript!
Me siga nas redes socias para mais dicas como essa: thicode.netlify.app/
Uma sugestão para o CSS é a adição da linha box-sizing: border-box; no reset, deixando assim:
*{
margin:0;
padding:0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box; //essa linha força o navegador a manter o tamanho origial dos elementos, sem adições de pixels por padding e margin;
}
Isso fará com que os inputs fiquem perfeitamente centralizados no Card.
Sequência de vídeos incrível, parabéns pelo trabalho. Abç.
Parabéns pela aula, mano!!!! Conteúdo incrível!
Parabéns pela aula. Muito top! 100% de aproveitamento
Aula incrível, muito obrigado.
Muito bom! Foi extremamente fácil de entender, muito obrigado pela ótima aula :)
Cara que aula bacana, parabéns!
Cara tu explica muito bem véi ! PARABÉNS !
Show de bola!!! Muito obrigado Professor!
Que didática é essa!!!! Parabens e obrigado pela aula.
Mano, me ajudou demais !! Otima explicação, sucesso !!
Muito bom, excelente didática!
Show de bola, aula muito bem detalhada e explicada. Parabéns
Muito obrigada!! Sua explicação é perfeita!! Me ajudou muuiittoo!!
Video muito bom parabéns. Me ajudou bastante
Muito obrigada pelo conteúdo, me ajudou bastante!
Neste momento vendo o primeiro vídeo, lá não pode comentar,mais já curti,valeu por compartilhar o conhecimento,sou iniciante. Javascript e tava quebrando a kbça pra validar usuário.mais vc deu a solução simples e muito bom
Massa demais, muito bom, nem precisa de localhost com PHP e SQL 👏👏👏👏👏
cara, bati a cabeça mas consegui implemtar no meu codigo, MUITO OBRIGADO MESMO!
Boooa! Tmj!
Que vídeo top!
Massa, muito top sua aula
Cara você é muito prático parabéns
adorei sua aula e sua forma de explicar! é sensacional :)
você pode fazer uma video aula fazendo a pagina "esqueci senha" com javascript?
Já consegui acessar pelo codepen. obrigado!!!
Ótimo . parabéns pelo trabalho.continue nos ensinando thi..
Valeu Luis!!!
Muito show, obrigado pelo conteúdo!!!
Tamo junto Herbert!
Muito boa à didática, vídeo perfeito, parabéns!
Valeuuuu 🚀
Mano show de bola pelo conteúdo, sua didática é sensacional.
Valeu manooo 👊🏽
Mano, encontrei o canal agora, e sinceramente tu tem uma didática muitooo boa cara, já me inscrevi aqui, espero que só cresça esse canal.
Valeu manooo!
mano que aulaaaa!! meus parabéns irmão, muito obrigado pelo conteúdo incrível!
Tamo junto! 🚀
Fala comigo Thiago. So te passando um feedback. Ja vi varios videos de tutoriais no net, os seus sao de qualidade superior, pode confiar que vc esta fazendo um bom trabalho. O crescimento do seu canal vai ser organico, nao precisa ter pressa e nem fazer propaganda. Mas uma coisa eh certa, ele nao vai parar de crescer :-)
Valeu demais mano ❤️
Bora pra mais uma, nota 10 brow!!
Boooa!
Thank you very much. It's much better than paying money.
Massa demais !
Ótima aula
Muito bom a explicação, sensacional !!!
Na parte de criar a funções dos botões,
Para as pessoas que estão realizando pelo VS Code como eu, terá que importar o arquivo.js para a sua página HTML, caso tenham colocado em arquivo separado sugiro acrescentar o "". Assim terá sucesso na implantação do código.
Ótima aula, aprendi muita coisa que não fazia ideia. Parabéns mano por tá compartilhando o conhecimento , muito legal o modo de explicar o conteúdo.
Massa demais mano! Valeu demais!
OBRIGADA POR SALVAR MEU TRABALHO!
É uma honra participar do seu crescimento!
Estou no primeiro período ainda de Análise e Desenvolvimento de Sistema. Tô muito empolgado e acompanho muitos canais relacionados a desenvolvimento e programação. Queria deixar meus parabéns pelo belo trabalho que você faz no seu canal, cara. Muito sucesso e estarei te acompanhando!
Muito obrigado pela moral Felipe! Boa sorte nos estudos =D
Muito bom estou seguindo e fazendo todos
Boa Daniel! Fico feliz que você está curtindo!
parabéns meu mano você e incrivel obrigado pela aula
Valeuuu!
incrível!
Cara, vc é muito didático, explica muito bem e com muita clareza, continua com os videos, estou aprendendo bastante, obrigado pela disponibilidade de ensinar.
obrigado pelo feedback mano! To firme e constante aqui hehe tem curso novo chegando logo mais!
@@thi_code show
Thi cara você deu uma aula 10
tmj mano!
Show cara!
Essa maneira de organizar todas variáveis antes de seguir com o código,é bem melhor mesmo. A maioria dos vídeos vejo variáveis e códigos todos juntos, e começa a dificultar o entendimento.
Muito bom, parabéns!
Estava a dois dias tentando entender onde estava o erro no código que estou trabalhando com localStorage, e nada de identificar o problema. Seu vídeo me ajudou a ver aonde estava o erro.
Aeee! Fico muito feliz em ter ajudado!
tu é o melhoooorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Cara, seu vídeo sobre FIGMA foi muito bom! Gostaria de ver uma séria. Maratonei seu canal e você é NINJA!!! Meus parabéns :)
Muito obrigado Paulo! Boa idéia ein, em breve podemos pensar em uma série sobre o Figma...
@@thi_code to procurando uma série de Figma, sou novo no canal!
mano, parabéns pela sua aula, que aula, adorei, aprendei muito com você, estou começando a programar e estou me perguntando faz alguns dias 'como eu faço pra fazer um login sem um banco de dados', e você me ajudou a entender isso, muito obrigado, ganhou um inscrito
Valeuuu 🤘🏽
Parabéns pela didática, cair de paraquedas e virei inscrito, ótimo canal
Valeu pelo feedback Alessandro!
@@thi_code o primeiro vídeo tá desabilitado de salvar a playlist,queria ver depois😊
@@programer115 Eita, vou ver isso...
Top seu canal mano.@Thi Code
Que playlist SENSACIONAL!!!! o tanto que eu tô aprendendo com essas aulas... Perfeito, mano. continua assim pfv. didática incrível!!! quem sabe não rola até umas aulas de node.js pra implementar um banco de dados nesse form??? kkkk fica a dica e tem mais um fã!
Muito obrigado Roandre! Cara, a próxima playlist do canal é de nodeJs no modelo MVC, e mais pra frente o plano é criar API, e consumir com SPA... Tem muita coisa boa vindo! Mais uma vez, muito obrigado pela força, tamo junto!
Eu aprendi mais nessas 4 aula s , do que 6 meses de um curso
Queria que você fosse professor da Alura \o/
Será que eles me notam? Hahaha
@@thi_code Cara, se você continuar nessa crescente e nunca desmotivar em produzir conteúdo de qualidade, duvido não notarem.
Meus parabéns novamente pelo canal e sucesso!!!
@@pauloreis4053 Valeuuu!
Thiago pergunta, eu to fazendo uma plataforma online pros meus funcionarios acessarem, ai to hospedando ela no firebase, se o localstorege tiver dentro da pasta que eu envio pro firebase, vai dar certo tbm ?
Que cara bom... Ta doido.
Valeu mano 😅
@@thi_code Possui algum curso?
@@ElPoderosoRafa ainda não mano...
Muito boa a aula obrigado.
Uma pergunta, eu queria usar o localstorage e acessar os dados depois, porem não estou conseguindo acessar o local já esta criado consigo deletar e editar mas em outro .JS não consigo acessar. Poderia me ajudar?
Obrigado.
Oi Thiago, tudo bom?
Estou fazendo esse projetinho aqui e não consigo fazer a validação (o nome por exemplo ficar em vermelho) e o olhinho mostrar a senha..
Estou fazendo pelo Visual Studio Code e não está indo.. quando faço o teste no Code Pen, ele funciona normalmente. Sabe o que pode ser? Qria usar o Visual Studio Code.. me ajuda por favor.
Estou reproduzindo esses seus vídeos nu VS code mas não to conseguido executar as ações do js no html. Pode me ajudar por favor? ja coloquei no html mas n resolveu
Não consegui encontrar a outra aula com a tela de inicio.
Alguém sabe como fazer sem ter usado label no html?
Eu n utilizei label escrevi oq eu queria no campo do placeholder agora na sei como prosseguir
👏🇧🇷😀
Boa noite! Como seria a validação para e-mail, pode ajudar? Parabéns pela otima didática que você tem!!!
Salve mano, cara para esse projeto não rola, precisariamos de um back-end, em breve vou fazer um conteúdo desse.
muito bom o conteúdo, eu só fiquei com uma duvida, n seria melhor em vez de usar vários let para os campos utilizar const? já que são constantes e o valor deles não vão ser alterados?
No último vídeo dessas playlist eu corrijo isso
@@thi_code ah legal, vou continuar acompanhando =D
cade o link do codg?
Esse js é o puro msm ou ta usando node? Se for o puro, não seria inseguro utilizar autenticação apenas com js no frontend?
É puro no front, é apenas um projeto de estudo para entender alguns conceitos legais de JS.
Se eu quisesse fazer a autenticação usando POST/GET como ficaria?
Você precisa de um servidor backend para fazer requisições HTTP e validar o login de forma segura e real. Esse projetinho é bem simples, com dados fixos apenas no front. Em breve vou lançar aqui um mini curso da stack MERN(da um google pra saber o que é hehe), dai conseguiremos aplicar essas práticas de forma real.
Olá,escrevi todo o código, repassei vídeos mas alguma coisa tá passando. E não finaliza.
Quando vai cadastrar sem preencher n sai a mensagem
O msm ocorre quando preenche, não sai a msg cadastro ok.
Ao salvar no localStorage tbm não salva,é não volta ao menu login.
Creio q tá faltando chamar o cadastrar direitinho.
Revisei function cadastrar não encontrei motivo. Alguém me ajuda?
tive o mesmo problema: resolvi colocando um id ao botão no HTML:
Cadastrar
E no Javascript criei uma váriável e uma função chamando essa ID:
let cadastrar = document.querySelector("#cadastrar");
cadastrar.addEventListener("click", ()=>{
if(validNome && validUsuario && validSenha && validConfirmSenha){
alert("Está tudo certo!");
}else{
alert("Preencha corretamente!");
}
})
Olá, estava reproduzindo o código via VsCode, e encontrei a seguinte dificuldade. "O Javascript estava iniciando antes que o html e estava dando erro nos input's, consegui corrigir com defer no link do js, porém depois que os valores são setado no input ele sempre está me retornando falso. Tem alguma outra maneira de fazer?
O último vídeo dessa playlist passa esse código para o vs Code... Da uma olhada nele
no video 2 que mostra a senha que o usuario digitou...não está funcionando...e meu código JS está assim... consegue ver o erro?
let btn = document.querySelector('#verSenha')
btn.addEventListener('click', ()=>{
let inputSenha = document.querySelector('#senha')
if(inputSenha.getAttribute('type') == 'password'){
inputSenha.setAttribute('type', 'text');
}else {
inputSenha.setAttribute('type', 'password')
}
})
resolvido!!!!!!!
Reproduzi fidedignamente o projeto, porém, se eu adiciono no input um usuário já salvo no meu Chrome, o campo de input fica com background-color branco, e não transparente como foi codado no css. Alguém sabe como solucionar ?
Murilo esse é um comportamento do próprio Chrome, porque você utilizou o complemento automático do navegador. Em outros navegadores, você pode testar depois, você vai ver que o comportamento é diferente.
@@thi_code mesmo sendo comportamento do próprio chrome, tem como ajustar isso?
Outra coisa se eu tento mudar esse comando:
msgError.setAttribute("style", "display: block");
para este comando:
msgError.setAttribute("style", "borde-radius: 30px");
Ao apertar cadastrar nao acontece nada, porque?
Difícil eu conseguir ajudar por aqui mano… entra na minha comunidade no discord, lá é mais fácil
na parte da validaçao do nome sempre caio dentro do else sabe me dizer o porque ?
let nome = document.querySelector('#nome')
let labelNome = document.querySelector('#labelNome')
nome.addEventListener('keyup', () => {
if (nome.value.lenght < 3) {
labelNome.setAttribute('style', 'color : red')
}
else {
labelNome.setAttribute('style', 'color : green')
}
})
ta faltando o "=" menor ou igual a 3
O meu nao funcionou a parte da validação, tem como ajduar?
Como assim?
Meu amigo, boa tarde.
Eu me deparei apenas com um problema, como faço para ele não cadastrar com campo vazio? Ele ainda cadastra com os dois campos vazios, no meu caso eu coloquei e-mail e senha.
Ai quando chega no login e você aperta no botão logar, ele faz "login realizado com sucesso" o alert que fiz.
Mas eu não queria isso, pós não existe cadastro com campo vazio.
Me ajuda pleasee?
Essa semana sai vídeo sobre isso
@@thi_code Tenho que entregar meu trabalho amanhã pro curso,HASHUASUHASUHAS
@@thi_code Tem algum artigo para me ajudar? Estou procurando, mas nada, abraços
classudo
hahaha
O que aconteceu com os vídeos? Não estou conseguindo acessar
Como assim? Qauis videos?
@@thi_code Quando entro no canal e vou na aba vídeos, não aparece nenhum.
@@thi_code parece que voltou ao normal agora
Incrivel, só tive um problema: o meu addEventListener diz que está a ler valores null, alguem sabe o que se passa? Obrigada mais uma vez pelo trabalho incrivel
O navegador está tentando cpturar um evento que ainda não foi carregado. Para resolver isso coloque essa função no seu javascript com todo o código dentro:
window.onload=function(){
*todo o código aqui*
}
Isso garante que o navegador reconheceu todos os elementos antes de executar seu código.
@@mateuszaghi4751 pode me explicar melhor, pois não estou conseguindo fazer
Muito bom o vídeo! Porém, implementei o mesmo código e mesmo com a sintaxe toda correta, não está armazenando no local storage..
Implementou em que embiente mano? No codepen mesmo?
@@thi_code implementei no vs code! Vi aqui agora que tem alguns navegadores que não suportam o local storage.. Uso o opera gx e parece que ele não suporta.. tem a ver?
@@itsdiaguiarg pode sim mano... Testa no chrome
@@thi_code testei mas continua não armazenando..
fiz tudo igual enao funcionou mais
a parte da validação deu ruim também?
o meu mostra confirme senha, não da certo, ele mostra mas depois não esconde mais, porem o senha esta normal e so copiei o codigo e renomie :(
pode estar tendo conflito quando busca o nome
@@thay8500 Obg pelo retorno, consegui resolver, essa parte! mas a validação ativa em todos campos quando começa a digitar o nome, tipo fica nome e sobrenome em vermelho desde o primeiro campo, esse não cnsegui identificar o erro
@@rogerioronne1 se quiser compartilhar o código aqui, poderia comparar para ver onde que está tendo conflito. As vezes na hora de determinar as "barras vermelhas" com o style, você acabou não fazendo a troca do nome das variáveis://
@@rogerioronne1 qual foi a solução?
@@thay8500 minha validação não funciona : let btn = document.querySelector('#verSenha')
let btnConfirm = document.querySelector('#verConfirmSenha')
let nome = document.querySelector('#nome')
let labelNome = document.querySelector('#labelnome')
let usuario = document.querySelector('#usuario')
let labelUsuario = document.querySelector('#labelUsuario')
let senha = document.querySelector('#senha')
let labelSenha = document.querySelector('#labelSenha')
let confirmsenha = document.querySelector('#confirmSenha')
let labelConfirmSenha = document.querySelector('#labelConfirmSenha')
nome.addEventListener('keyup', () => {
if(nome.value.length {
let inputSenha = document.querySelector('#senha')
if(inputSenha.getAttribute('type') == 'password'){
inputSenha.setAttribute('type','text')
} else {
inputSenha.setAttribute('type', 'password')
}
})
btnConfirm.addEventListener('click', ()=>{
let inputConfirmSenha = document.querySelector('#confirmSenha')
if(inputConfirmSenha.getAttribute('type') == 'password'){
inputConfirmSenha.setAttribute('type','text')
} else {
inputConfirmSenha.setAttribute('type', 'password')
}
})
esse trecho: nome.value.length, n funciona no vs code, tentei de todo jeito.
ola tudo bem, gostaria de saber como armazenar esse projeto que vc fez em outro banco de dados local tipo mongodb ou sql server? poderia me ajudar estou fazendo um trabalho para faculdade
Muito bom! Excelente didática
Valeuuu 🚀