1

tengo un login con html, css, y js. ¿Por que no me detecta 3 intentos fallidos de inicio de sesión en el login y como poner después del tercer intento fallido en espera al usuario, de modo que no permita editar los espacios para tratar de iniciar sesión?

¿Cómo mostrar un alert en donde aparezca el tiempo restante de espera en que se le permitirá editar los espacios de usuario y contraseña de nuevo?

let attempt = 3;

function validate() {
  var usuar = document.getElementById("usuar").value;
  var password = document.getElementById("password").value;
  if (usuar == "Admin" && password == "12345") {
    alert("Ingreso exitosamente");
    window.location = ".html";
    return false;
  }
  if (usuar == "cliente" && password == "acceso") {
    alert("Ingreso exitosamente");
    window.location = ".html";
    return false;

  } else {
    attempt--;
  }
  alert(" Te queda " + attempt + " intentos mas ")
  if (attempt == 0) {
    document.getElementById("usuar").disable = true;
    document.getElementById("password").disable = true;
    document.getElementById("sumbit").disable = true;

  }
}

Código html del login:

<!DOCTYPE html>
<html>

<head>
  <title>login</title>
  <link rel="stylesheet" href="login.css">
  <script src="login.js"></script>


</head>

<body>

  <div class="container">

    <div class="main">
      <img src="formulario/pngegg.png" alt="">
      <form id="form_id" method="POST" name="myform">
        <label>usuario:</label>
        <input type="text" name="usuar" id="usuar" planceholder="ingrese usuario">
        <label>password:</label>
        <input type="password" name="password" id="password" planceholder="ingrese password">
        <input type="button" value="login" id="sumbit" onclick="validate()">
      </form>
      <span><b class="note">¿Olvidastes tu contaseña?</b>
               </span>
    </div>
  </div>

</body>

</html>

1 respuesta 1

1

Hola aqui veras un poco tu codigo modificado, para hacer lo que deseas requieras hacer uso de setTimeOut en este ejemplo dura 5seg y nuevamente si inicializan los intentos a 3

let attempt = 3;

function validate() {
  var usuar = document.getElementById("usuar").value;
  var password = document.getElementById("password").value;
  if (usuar == "Admin" && password == "12345") {
    alert("Ingreso exitosamente");
    window.location = ".html";
    return false;
  }
  if (usuar == "cliente" && password == "acceso") {
    alert("Ingreso exitosamente");
    window.location = ".html";
    return false;

  } else {
    attempt--;
  }
  alert(" Te queda " + attempt + " intentos mas ")
  if (attempt <= 0) {
alert('Espera 5 segundos para seguir intentando');
document.getElementById("usuar").setAttribute('disabled','disabled');
    document.getElementById("password").setAttribute('disabled','disabled');
   document.getElementById("sumbit").setAttribute('disabled','disabled');
setTimeout(function(){
    
document.getElementById("usuar").removeAttribute('disabled');
    document.getElementById("password").removeAttribute('disabled');
   document.getElementById("sumbit").removeAttribute('disabled');

},5000);

attempt=3;
  }
  }
 <form id="form_id" method="POST" name="myform">
        <label>usuario:</label>
        <input type="text" name="usuar" id="usuar" planceholder="ingrese usuario">
        <label>password:</label>
        <input type="password" name="password" id="password" planceholder="ingrese password">
        <input type="button" value="login" id="sumbit" onclick="validate()">
      </form>
      <span><b class="note">¿Olvidastes tu contaseña?</b>
               </span>

1
  • Hola buenas tardes, tu código funciono perfectamente, muchas gracias por tu ayuda Commented el 14 may. 2022 a las 0:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.