0

Tenho uma página de login feita com HTML e CSS e preciso impedir o login nela com JavaScript sob certas condições, mas ainda não peguei muito a manha de como fazer isso. Estou procurando na internet, mas ainda não consegui fazer isso. No máximo consegui fazer o pop-up caso as condições não forem atendidas, mas não consegui impedir o login com o return false.

As condições:

  • A senha deve ser maior que 6 caracteres;
  • O campo de e-mail não pode estar em branco;

Meu código HTML:

<html>
    <head>
        <meta charset="utf-8">
        <title>
          Login
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body id="body">
        <h1 id="titulo">
            Logue-se por favor
        </h1>
        <form id="login-form">
            <input id=email class=displayBlock type="email" placeholder="Email">
            <input id="senha" class=displayBlock  type="password" placeholder="Senha">
            <label class=displayBlock >
                <input type="checkbox"> Lembrar-me
            </label>
            <input id=entrar-btn type="submit" value="Entrar">
        </form>
        <script src="script.js"></script>
           </body>
</html>
2
  • E qual é o seu código Javascript? Utilizou o evento onsubmit do formulário para validação?
    – Woss
    Commented 20/05/2017 às 3:52
  • Valeu pela resposta... a aba javascript meio que tá em branco por enquanto, me deram essa tarefa, mas eu não entendo nada de javascript ainda, é meio que pra aprender na marra. O máximo que eu tinha conseguido fazer por conta própria tinha sido uns avisos pop-ups sobre os critérios não atendidos. Não cheguei a fazer o evento onsubmit, vou tentar agora, valeu. Commented 20/05/2017 às 4:23

3 Respostas 3

0

Campo Email:

Use nos campos obrigatórios o attribute required, esse attribute requer que o usuário digite algo.

<input id=email class=displayBlock type="email" placeholder="Email" required>

Campo Input Limite de caracteres:

function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
     limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}

function send(form){
  if(form.limitedtextarea.value.length >= 5){
    form.submit();
  }else{
    alert("Digite o minimo")
  }
}

input senha:

 <input onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);" name="limitedtextarea">

botão enviar:

<input id=entrar-btn type="submit" value="Entrar" onclick="send(this.form);>

Coloquei o exemplo no codepen

https://codepen.io/danilorb/pen/WjYrNr

0

É possível resolver seu problema utilizando apenas HTML 5.

Para a condição do campo de e-mail, basta adicionar o atributo required. Sendo definido o atributo type como email, navegadores com suporte a este tipo ainda validarão se o valor informado é um endereço de e-mail válido.

<input id="email" type="email" placeholder="Email" required>

Para a condição do campo de senha, podemos definir um padrão a partir de uma expressão regular utilizando o atributo pattern. Informando a regex .{6,} estamos dizendo que é permitido qualquer caractere com um comprimento de 6 ou mais. Para que seja aplicado esta regra ao valor informado, o atributo required também precisa ser adicionado.

<input id="senha" type="password" placeholder="Senha" pattern=".{6,}" required>

Veja um exemplo funcional:

<form>
  <input id="email" type="email" placeholder="Email" required>
  <input id="senha" type="password" placeholder="Senha" pattern=".{6,}" required>
  <label>
    <input type="checkbox"> Lembrar-me
  </label>
  <input type="submit" value="Entrar">
</form>

Mensagem quando o formulário é submetido e o campo de e-mail está vazio:

inserir a descrição da imagem aqui

Mensagem quando o formulário é submetido e o campo de e-mail é inválido:

inserir a descrição da imagem aqui

Mensagem quando o formulário é submetido e o campo de senha não segue o padrão definido:

inserir a descrição da imagem aqui

0

Qualquer elemento HTML pode ter um atributo id. O valor desse atributo deve ser único dentro do documento - dois elementos no mesmo documento não podem ter a mesma identificação. Você pode selecionar um elemento com base nessa identificação exclusiva com o método getElementById() do objeto document.

Pensando em um controle HTML:

  • no caso input email, que não pode estar em branco poderemos utilizar a propriedade value que se refere ao valor do campo.

  • no caso, input senha, que deve ser maior que 6 caracteres poderemos utilizar value.length cuja propriedade length representa o comprimento.

Arquivo script.js

function verifica()  { 
   
    if ( document.getElementById("email").value == "")  {    
        alert("Por favor, o campo email não pode estar vazio");  
        return false;
    } 
    
    if ( document.getElementById("senha").value.length < 7)  {    
        alert("Por favor, o campo senha não pode ser menor que 7");  
        return false;
    }      
}
    <form id="login-form" onSubmit="return verifica();" >
        <input id="email" class="displayBlock" type="email" placeholder="Email">
        <input id="senha" class="displayBlock"  type="password" placeholder="Senha">
        <label class="displayBlock">
            <input type="checkbox"> Lembrar-me
        </label>
        <input id="entrar-btn" type="submit" value="Entrar">
    </form>
    <script src="script.js"></script>

Em HTML5 existem atributos que irão validar o formulário no momento em que o usuário clicar para submete-lo, como o min, max, pattern, step e required além dos já conhecidos Type e Maxlenght.

A compatibilidade destes elementos até o momento é com os browsers Firefox 15+, Chrome 23.0+, Safari 5.1+, Opera 12+ e IE10. Além dos navegadores mobile Opera, Chrome e Safari.

Como existe uma quantidade considerável de usuários de IE9, é importante ter um fallback de JavaScript e/ou PHP. No entanto, em um futuro perfeito (e espero que não muito distante), todas as pessoas usarão as versões mais modernas dos browsers e poderemos desfrutar das novas tecnologias sem medo.

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 .