Home / Questions / 303346
Accepted
Flowcou
Asked: 2020-10-25 07:09:24 +0800 CST 2020-10-25 07:09:24 +0800 CST

Add three JavaScript password validation attempts

  • 772

I'm doing a JS exercise where they ask me to enter a password with a requirement and that if the third time I try the goal wrong, you can't continue entering data in the input. The problem is that I have it with real-time validation, which until you enter the word correctly, is always invalid. I leave my code.

document
    .getElementById('campo')
    .addEventListener('input', function(evt) {
        const campo = evt.target,
            valido = document.getElementById('campoOK'),

            regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$%*&\-\_])[A-Za-z\d$@$%*&\-\_]{8,16}$/;

        if (regex.test(campo.value)) {
            valido.innerText = "válido";

        } else {
            valido.innerText = "incorrecto";

        }
    });
javascript

2 Answers

  1. Best Answer

    You can do it with a buttonto validate the password, by adding a counter we will know how many attempts it takes, on the third wrong attempt the button validarwill be blocked.

    document.getElementById('validar').addEventListener('click', valida);

let contador = 1;
function valida(){

        const campo = document.getElementById('campo');
            valido = document.getElementById('campoOK'),

            regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$%*&\-\_])[A-Za-z\d$@$%*&\-\_]{8,16}$/;

        if (regex.test(campo.value)) {
            valido.innerHTML = "válido";

        } else {
            valido.innerHTML = "incorrecto";
            console.log(`Intento: ${contador}`);
            if(contador === 3){
              document.getElementById('validar').disabled = 'true';
            }
            contador++;
        }

}
    <input type="text" id="campo">
<button id="validar">Validar</button>
<div id="campoOK"></div>

    • 1

  2. By adding a listener to the event input, what you do is evaluate each time there is a change in that field, in this case each key that is pressed.

    That is, if the partial text that you are writing does not validate, it will be counted as incorrect. As in your regex the minimum is 8 characters, it will always give invalid on the third key that we press, whatever it may be.

    In addition to that, the counter should be off, so as not to reset the counter on every event. To make testing more comfortable, in the regex I put as good only if numbers are entered.

    let intentos = 0;

document
  .getElementById('validar')
  .addEventListener('click', function(evt) {
    const campo = document.getElementById('campo'),
      valido = document.getElementById('campoOK')


    if (intentos >= 3) {
      return;
    }

    if (/^\d+$/g.test(campo.value)) {
      valido.innerText = "válido";
      intentos = 0;

    } else {
      intentos++;
      valido.innerText = "incorrecto, intentos: " + intentos;

      if (intentos >= 3) {
        valido.innerText = "Nunca mas vas a poder intentar";
      }
    }
  });
    <input id="campo" type="text"><button id="validar">validar</button>
<div id="campoOK"></div>

</div>

    • 1