0

Resolvi criar um projeto em JavaScript puro sem banco de dados, bem simples mesmo só pra estudar.

Esse sistema cadastra carros em um estacionamento, até ai beleza, mas quero que na pagina inicial o " Dono da empresa " entre com o login e senha, simulando um login mesmo.

Só que a pessoa digita o login e não vai para outra pagina, o que eu to fazendo de errado?

O código javascript é esse aqui:

var login = "[email protected]";
var senha = "1234";
var botao = document.querySelector("botaoEnviar");
botao.addEventListener("click", function(event){
    event.preventDefault();

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
    }else{
        return false;
    }

});

E o código HTML esta aqui:

<html>
<head>
    <title>Estacionamento</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<form id="formLogin" action="index.html" method="post">
    <div class="container">
        <div class="row vertical-offset-100">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Entre com o seu login</h3>
                    </div>
                    <div class="panel-body">
                        <form accept-charset="UTF-8" role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" id="inputEmail" placeholder="E-mail" name="email" type="text">
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="inputPass" placeholder="Password" name="password" type="password">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                                </label>
                            </div>
                            <input class="btn btn-lg btn-success btn-block" id="botaoEnviar" type="submit" value="Login">
                        </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="js/validarLogin.js"></script>
</body>
</html>

O erro no console do navegador:

validarLogin.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null at validarLogin.js:4

1 Resposta 1

1

Tente mudar esta linha:

var botao = document.querySelector("botaoEnviar");

Para:

var botao = document.querySelector("#botaoEnviar");

Se deseja selecionar pelo id, tem de especificar o prefixo #. Se deseja-se selecionar pela class, teria de especificar com o prefixo "." (sem aspas). É tal e qual como com css.

Neste caso o erro seria porque como não especificou com o prefixo ele não encontraria nada e então a variável botão seria igual a NULL.

Mas não se esqueça que o ID deverá ser unico, e então seria mais facil nesta situação utilizar a função document.getElementById(ID), e com esta função não teria de especificar o prefixo #, por exemplo:

var botao = document.getElementById("botaoEnviar");

A razão que nao acontece nada mesmo arranjando o erro acima, é porque você não está a emitir nada:

var login = "[email protected]"; // <<<< Variavel pre-definida
var senha = "1234"; // <<<<< Variavel pre-definida
var botao = document.querySelector("botaoEnviar");
botao.addEventListener("click", function(event){
    event.preventDefault(); //<< Cancela o evento independemente se tiver certo ou errado

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
    }else{
        return false;
    }

});

Como você pre-definiu as variaveis elas teram sempre corretas então não mostrara mensagem nenhuma, e como você cancela o evento logo ao inicio ele nunca avança, se você tirar os valores dos inputs, e só cancelar o evento quando ocorre um erro já funcionará:

var botao = document.querySelector("#botaoEnviar");
botao.addEventListener("click", function(event){
    var login = document.getElementById("inputEmail").value;
        var senha = document.getElementById("inputPass").value;

    if(login == "" || login.indexOf('@')==-1 || login.indexOf('.')==-1){
        console.log("E-mail errado");
        alert("E-mail errado");
      event.preventDefault();
    }
    if(senha == ""){
        console.log("Senha errada");
        alert("Senha errada");
      event.preventDefault();
    }

});
3
  • Não deu certo, tentei dos dois jeitos e continua a mesma coisa, se eu uso o getElementById o erro no console some, porem nao envia. Commented 19/01/2018 às 14:57
  • Verifique agora a resposta @GuilhermeRamos
    – Ivo Silva
    Commented 19/01/2018 às 15:18
  • 1
    Deu certo, muito obrigado!!! Commented 19/01/2018 às 16:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .