Olá,
Meu nome é Micael, atualmente venho fazendo faculdade de análise e desenvolvimento de sistemas, entretanto estou com uma atividade, qual tenho que “construir uma função em javascript que coleta informação de usuário e senha num formulário html e verifica se ambos os campos estão preenchidos. Se não, ele exibe uma mensagem avisando que são campos de preenchimento obrigatório. Caso contrário, mostra uma mensagem de sucesso.”
O mesmo não conseguir desenvolver o código, e fico travado, não sei por onde começar. Já li alguns artigos na internet, vídeos, mas fico travado na hora de construir. Até fiz uns rascunhos no meu caderno para ver se conseguia alguma coisa, mas o que acabei fazendo não tem uma ordem lógica.
Desde já agradeço a ajuda que vier!
Olá, @Micael_Beilke . Bem-vindo ao fórum do freeCodeCamp. Li o problema e acho que há como ajudar, sim. Mas deixa eu fazer uma pergunta primeiro: há alguma obrigatoriedade de que seja dentro da função que a verificação do preenchimento seja feita? Pergunto isso pois, no html, há um atributo chamado required. Se você o colocar no elemento no html, ele não deixa que o formulário seja publicado sem que você coloque algo que seja dentro do input.
Exemplo:
<input type = "text" name = "usuario" required>
<input type = "password" name = "senha" required>
Será que essa alternativa já não resolve o problema? Boa sorte e bons estudos. 
1 Like
No JavaScript seria a mesma coisa?
Em relação a pergunta, sim. Como falado o código em si não consegui desenvolver. Entretanto vejo alguns, e o mesmo vou vendo em partes para tentar entender como vai funcionar. E atualmente estou baseando em um para tentar entender.
Oi, @Micael_Beilke. Se precisa ser por função, um exemplo que você poderia utilizar seria esse:
const usuario=document.getElementById("usuario");
const senha=document.getElementById("senha");
if(username == "" || senha == "") {
alert("Os campos usuário e senha são obrigatórios");
} else {
// aqui vai o que o código fará se tiver usuário e senha - para testar, você pode colocar 'alert("Funcionou");' ou algo parecido.
}
O que estamos fazendo aí em cima: as duas primeiras linhas declaram variáveis em JS apontando para os dois inputs no html (é preciso dar um id para cada um deles no html - nesse caso, “usuario” para um input e “senha” para o outro). Depois, no momento de fazer o envio do formulário, é preciso que a função seja chamada para conferir se os campos estão ou não vazios. Vê se essa resposta já é útil para você e dá um retorno aqui para a gente. Se o problema é na hora do envio, faça uma pesquisa sobre event listeners e preventDefault para ver isso já resolve. Bons estudos. 
3 Likes
Olá, tudo bem ?
Eu não sei se ficou certo, ficou mais ou menos assim o código.
Não sei se precisa de mais algo ou complementar
function Login() {
const usuario = document.getElementsByName('usuario')[0].value;
usuario=usuario.toLowerCase();
const senha= document.getElementsByName('senha')[0].value;
senha=senha.toLowerCase();
if (usuario=="admin" && senha=="admin") {
if(usuario == "" || senha == "") {
alert("Os campos usuário e senha são obrigatório"); }
else (usuario=="admin" && senha=="admin"){
alert("Login realizado com sucesso!")
}
}
}
Oi, @Micael_Beilke! Por que você tá usando getElementsByName, por curiosidade? Há mais de um ‘usuario’ ou mais de um ‘senha’ no seu formulário? Eu pessoalmente atribuiria os ids e usaria getElementById, como fiz no exemplo. Aí, o [0] seria desnecessário. Boa percepção a do .value ao final. Esqueci de colocar no exemplo. Boa sorte aí e bons estudos.
Olá,
Apenas um usuário e uma senha. O trecho que usou como exemplo seria para mais de um ? Percebi que tinha usado incorretamente, acabei corrigindo.
Eu já estou um pouco perdido nos códigos também rsrs
Código corrigido
function Login() {
const usuario = usuario=document.getElementById("usuario").value;
usuario=usuario.toLowerCase();
const senha=document.getElementById("senha").value;
senha=senha.toLowerCase();
if(usuario == "" || senha == "") {
alert("Os campos usuário e senha são obrigatório"); }
else (usuario=="admin" && senha=="admin"){
alert("Login realizado com sucesso!")
}
}
}
Esse trecho abaixo seria se caso fosse preenchido e estivesse certo, mas tem outra forma né? além desta qual fiz.
else (usuario=="admin" && senha=="admin"){
alert("Login realizado com sucesso!")
O que aconteceria (conforme o código que você escreveu) se usuario ou senha fossem diferentes de admin? Outra pergunta: Não temos um } a mais aí? Bons estudos, Micael!
No caso ali teria que ter mais uma estrutura de decisão, para caso usuário fosse diferente de admin?
Pois então não conseguiria logar, pois só seria aquele usuário e senha conforme está na estrutura. Como faço para fazer a validação, sem precisar colocar toda vez os usuários e senha como foi feito acima?
E será necessário colocar mais uma estrutura de decisão para caso usuário ou senha fosse errado?
Neste caso, sugiro consultar este endereço. Dá uma olhada na diferença entre o ‘else’ e o ‘else if’ e vê se isso soluciona o caso. Boa sorte e bons estudos.
Olá tudo bem?
estive ultimamente tralhando no código javascript, meio que já finalizei mas não entendo porque a função não funcionou. Segue o print
Oi, @Micael_Beilke . A função está sendo chamada em algum lugar?
Outra pergunta: não seria mais prático unir as variáveis que tratam da mesma coisa? Exemplo: em vez de ter duas variáveis de usuário, ter uma assim → const usuario = document.querySelector("#usuario").value.toLowerCase()
No if, daí, chamar apenas usuario em vez de $usuario.value? Não entendi muito bem o motivo de criar usuario e senha sem o $ se você não vai utilizar nenhum dos dois. Bons estudos.
