Hola, quisiera ayuda en mi campo de contraseña donde tengo estos 2 tipos de mensajes de validación:
Primero, si se muestra la entrada de la contraseña cuando el usuario hace clic en el botón Enviar, ¡ingrese la contraseña!
Segundo, si la entrada de la contraseña es incorrecta donde no cumplió con el requisito, ¡la contraseña no cumple con el requisito!
Aquí mi código para mi html para la contraseña y el botón de enviar
<div class="form-group row"> <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label> <div class="col-6 d-flex"> <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="password" placeholder="Password" required> <i class="bi bi-eye-slash" id="togglePassword"></i> <div style="margin-left: 15px;" class="invalid-tooltip password-empty" hidden> Enter a password! </div> <div style="margin-left: 15px;" class="invalid-tooltip password-notmeet" hidden> Password do not meet the requirement! </div> </div> </div> <button type="submit" class="btn-primary submitbutton">Add</button>Probé un Jquery/JavaScript pero parece que no funciona. Creo que estoy haciendo algo mal aquí.
var empty = $(document.getElementById("password").value == '') if (empty){ $('.pass').removeAttr('hidden'); } else{ $('.pass').attr('hidden', ''); }necesitaba ayuda ya que no estoy familiarizado con cómo debería funcionar la entrada?
Revisé su código y parece que la parte js/jquery no está completa. También hay una llamada de función en la entrada mientras se escribe algo en la entrada que falta en su código js, por lo que la consola arroja un error cada vez que se cambia el texto de entrada. Aparte de eso, hice algunos cambios en su código, así que, si entendí bien, debería hacer lo que está pidiendo.
html:
<div class="form-group row"> <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label> <div class="col-6 d-flex"> <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="password" placeholder="Password" required> <i class="bi bi-eye-slash" id="togglePassword"></i> <div style="margin-left: 15px; display: none;" class="invalid-tooltip password-empty"> Enter a password! </div> <div style="margin-left: 15px; display: none;" class="invalid-tooltip password-notmeet"> Password do not meet the requirement! </div> </div> </div> <button class="btn-primary submitbutton" id="submitbutton">Add</button>js/jquery (recuerde siempre importar la biblioteca jquery antes de ejecutar su código js):
$('#submitbutton').click(function() { var passwordInput = $('#password') //Empty password validation if (passwordInput.val() == '') { $('.password-notmeet').hide(); $('.password-empty').show(); return; } //Any other requirements (ex: passwd length) if (passwordInput.val().length < 6) { $('.password-empty').hide(); $('.password-notmeet').show(); return; } //more code });