Estoy tratando de verificar el nivel de seguridad de una contraseña y poner los bordes del campo en verde o rojo (según el respeto de las condiciones). He tenido éxito, pero JavaScript solo selecciona el primer campo (el campo de apodo), mientras que me gustaría seleccionar el último. He intentado todo tipo de cosas pero nada funciona. ¿Alguien puede ayudarme?
Aquí está el código HTML:
... <label for="pseudo">Rentrez un pseudo </label> <input type="text" id="pseudo"> <label for="pseudo">Rentrez un mdp</label> <input type="password" id="mdp"> <script src="js/verif_filed.js"></script> ...y el código js:
const validationInput = document.querySelector("input"); const cara_nbr = Array.from("0123456789"); const cara_lower = Array.from("abcdefghijklmnopqrstuvwxyz"); const cara_upper = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ"); validationInput.addEventListener('input', (element) => { let have_nbr = false; let have_spetial = false let have_lower = false; let have_upper = false; for (let i of element.target.value) { if (cara_nbr.includes(i)) {have_nbr = true;} if (cara_lower.includes(i)) {have_lower = true;} if (cara_upper.includes(i)) {have_upper = true;} if (!(cara_nbr.includes(i) || cara_lower.includes(i) || cara_upper.includes(i))){ have_spetial = true; } } if (element.target.value.length >= 8 && have_nbr == true && have_spetial && have_lower == true && have_upper == true) { validationInput.style.borderColor = "green"; } else { validationInput.style.borderColor = "red"; console.log(e.target.value) console.log(have_nbr, have_lower, have_upper) }Puede seleccionar el último elemento <input> por su id.
const validationInput = document.querySelector("input#mdp"); // or const validationInput = document.getElementById("mdp");Debe usar querySelectorAll y luego recorrer los elementos:
const validationInputs = document.querySelectorAll("input"); // returns an arrayCírculo:
validationInputs.forEach(input => { input.addEventListener('input', (element) => { let have_nbr = false; let have_spetial = false let have_lower = false; let have_upper = false; for (let i of element.target.value) { if (cara_nbr.includes(i)) {have_nbr = true;} if (cara_lower.includes(i)) {have_lower = true;} if (cara_upper.includes(i)) {have_upper = true;} if (!(cara_nbr.includes(i) || cara_lower.includes(i) || cara_upper.includes(i))){ have_spetial = true; } } } }