2

Estoy creando un formulario para cambiar la contraseña en mi web, el formulario muestra una ayuda visual a los usuarios para que cumplan con la complejidad de la contraseña. En general funciona bien, pero si el usuario simplemente hace tab sin escribir ni confirmar la contraseña el script lo valida como que - Ambas contraseñas son ambas son iguales - Ya que ambos campos están vacíos.

Ayuda validación complejidad contraseña

Me gustaría que el script validara si las contraseñas son iguales solo si los campos no están vacíos.

Este es el código de mi javascript y html

$(document.registration).ready(function() {

  $('input').keyup(function() {
    // set password variable
var password = $(this).val();
var p1 = document.getElementById("password1").value;
var p2 = document.getElementById("password2").value;
var noValido = / /;

//validar longitud contraseña
if ( password.length < 8 ) {
    $('#length').removeClass('valid').addClass('invalid');
} else {
    $('#length').removeClass('invalid').addClass('valid');
}
//validar letra
if ( password.match(/[A-z]/) ) {
    $('#letter').removeClass('invalid').addClass('valid');
} else {
    $('#letter').removeClass('valid').addClass('invalid');
}

//validar letra mayúscula
if ( password.match(/[A-Z]/) ) {
    $('#capital').removeClass('invalid').addClass('valid');
} else {
    $('#capital').removeClass('valid').addClass('invalid');
}

//validar numero
if ( password.match(/\d/) ) {
    $('#number').removeClass('invalid').addClass('valid');
} else {
    $('#number').removeClass('valid').addClass('invalid');
}

//validar confirmación contraseña
if (p1.length == 0 || p2.length == 0) {
  $('#null').removeClass('valid').addClass('invalid');
} else {
  $('#null').removeClass('invalid').addClass('valid');
}

//validar contraseñas cohincidan
if (p1 != p2) {
  $('#match').removeClass('valid').addClass('invalid');
} else {
  $('#match').removeClass('invalid').addClass('valid');
}

if(noValido.test(p1 || p2)){ // se chequea el regex de que el string no tenga espacio
  $('#blank').removeClass('valid').addClass('invalid');
} else {
  $('#blank').removeClass('invalid').addClass('valid');
}

}).focus(function() {
    $('#pswd_info').show();
}).blur(function() {
    $('#pswd_info').hide();
});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" name="password1" id="password1" class="form-control" aria-describedby="emailHelp" placeholder="Ingresa tu contraseña">
<label for="password-confirm">Confirmar contraseña</label>
<input type="password" name="password-confirm" id="password2" class="form-control" aria-describedby="emailHelp" placeholder="Confirma tu contraseña">
<div id="pswd_info">
  <h4>La contraseña debe cumplir los siguientes requerimientos:</h4>
  <ul>
    <li id="letter" class="invalid">Al menos <strong>una letra</strong></li>
    <li id="capital" class="invalid">Al menos <strong>una letra mayúscula</strong></li>
    <li id="number" class="invalid">Al menos <strong>un número</strong></li>
    <li id="length" class="invalid">Al menos <strong>8 carácteres</strong></li>
    <li id="null" class="invalid">Debe <strong>confirmar la contraseña</strong></li>
    <li id="match" class="invalid">Las contraseñas <strong>deben cohincidir</strong></li>
    <li id="blank" class="invalid">Las contraseñas <strong>no deben tener espacios</strong></li>
  </ul>
</div>

2
  • 1
    Pues valida primero que no estén vacíos los campos if(password != ""){} y ahí sí interactuar con el campo
    – DaxTter77
    Commented el 5 nov. 2019 a las 14:27
  • 1
    al perder el foco en el segundo texto puedes lanzar la validacion, pero es mas recomendable cuando presiones un boton de registro o envio Commented el 5 nov. 2019 a las 14:29

2 respuestas 2

2

Trata de validar siempre primero que los campos no estén vacíos, ya que el empieza a ejecutar cada una de las cosas que le pides que valide, pero pues, es irrelevante ya que los campos están vacíos, entonces en ese caso algo así estaría bien.

$(document.registration).ready(function() {

  $('input').keyup(function() {
    // set password variable
    var password = $(this).val();
    var p1 = document.getElementById("password1").value;
    var p2 = document.getElementById("password2").value;
    var noValido = / /;


    //validar longitud contraseña
    if ( password.length < 8 ) {
        $('#length').removeClass('valid').addClass('invalid');
    } else {
        $('#length').removeClass('invalid').addClass('valid');
    }
    //validar letra
    if ( password.match(/[A-z]/) ) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
    }

    //validar letra mayúscula
    if ( password.match(/[A-Z]/) ) {
        $('#capital').removeClass('invalid').addClass('valid');
    } else {
        $('#capital').removeClass('valid').addClass('invalid');
    }

    //validar numero
    if ( password.match(/\d/) ) {
        $('#number').removeClass('invalid').addClass('valid');
    } else {
        $('#number').removeClass('valid').addClass('invalid');
    }

    if(p1 != "" && p2 != ""){

      //validar confirmación contraseña
      if (p1.length == 0 || p2.length == 0) {
        $('#null').removeClass('valid').addClass('invalid');
      } else {
        $('#null').removeClass('invalid').addClass('valid');
      }

      //validar contraseñas cohincidan
      if (p1 != p2) {
        $('#match').removeClass('valid').addClass('invalid');
      } else {
        $('#match').removeClass('invalid').addClass('valid');
      }

      if(noValido.test(p1 || p2)){ // se chequea el regex de que el string no tenga espacio
        $('#blank').removeClass('valid').addClass('invalid');
      } else {
        $('#blank').removeClass('invalid').addClass('valid');
      }
    }

  }).focus(function() {
      $('#pswd_info').show();
  }).blur(function() {
    $('#pswd_info').hide();
  });

});

Ojalá te sirva, cualquier duda o sugerencia me la comentas, saludos!!

2
  • En general me funcionó, cambie el operador en // se chequea el regex de que el string no tenga espacio if(noValido.test(p1 && p2)){ para que revisará ambos campos. Sin embargo noto que si utilizo más de 8 espacios me valida la regla de 8 caracteres - //validar longitud contraseña if ( password.length < 8 ) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } - Creo que evaluaré primero los espacios antes de todo lo demás, aunque no se si cubra el caso del todo. Commented el 5 nov. 2019 a las 15:39
  • 1
    Tienes que intentar tapar todos los huecos, sí validas que sea mayor a 8 caracteres, entonces valida cuando sea menos, y así, igual probando te das cuenta que te faltan cosas, asi que pruebalo de multiples formas pensables
    – DaxTter77
    Commented el 5 nov. 2019 a las 15:41
1

Lo ideal es usar una expresión regular para validar todos los casos que comentas.

Si deseas que tu contraseña en ambos campos cumpla estos casos:

introducir la descripción de la imagen aquí

puedes usar la expresión regular:

var regex =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{8,}$/;

la cual valida contraseñas de al menos una letra, al menos un numero, al menos una letra mayúscula, al menos 8 caracteres, no permite espacios.

Este es un ejemplo usando la Regexp y validando campos para confirmar el valor de la contraseña:

  function checkPassword(valor){
    var myregex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/; 
   if(myregex.test(valor)){
       alert(valor+" es valido :-) !");
       return true;        
   }else{
      alert(valor+" NO es valido!");
       return false;        
   }   
 }

  function checkForm(form){
    if(form.username.value == "") {
      alert("Error: Debe escribir Usuario!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("Error: Nombre de usuario debe contener únicamente letras, numeros y underscores!");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("La contraseña no es valida!");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("Error: las contraseñas no coinciden!");
      form.pwd1.focus();
      return false;
    }
    return true;
  }
<form method="POST" action="/.../" onsubmit="checkForm(this); return false;">
<p>Usuario: <input type="text" name="username"></p>
<p>Contraseña: <input type="password" name="pwd1"></p>
<p>Confirmar Contraseña: <input type="password" name="pwd2"></p>
<p><input type="submit" value="verificar"></p>
</form>

Revisa el documento :

JavaScript: validación de contraseña con expresiones regulares y HTML5

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.