I tried to code a password validator for registration, it works well but I still have an error in the console:
Uncaught Type Error: input is null.
Everything works fine except for this error. the error comes from the line input.addEventListener("input", function()
It's the input that is the problem but I don't understand why. Can anyone help me with this please?
let input = document.querySelector(".password_login");
let number = document.querySelector(".number");
let largeLetter = document.querySelector(".large-letter");
let smallLetter = document.querySelector(".small-letter");
let generique = document.querySelector(".generique");
let special = document.querySelector(".special");
function validation(password) {
if (/[@[^_!"#$%&'(+)*,./:;{}<>=|~?]{1}/.test(password.value)) {
input.classList.remove("invalide");
special.classList.remove("error");
input.classList.add("succes");
special.classList.add("succes");
} else {
input.classList.remove("succes");
special.classList.remove("succes");
input.classList.add("invalide");
special.classList.add("error");
}
if (/[0-9]{1}/.test(password.value)) {
input.classList.remove("invalide");
number.classList.remove("error");
input.classList.add("succes");
number.classList.add("succes");
} else {
input.classList.remove("succes");
number.classList.remove("succes");
input.classList.add("invalide");
number.classList.add("error");
}
if (/[A-Z]{1}/.test(password.value)) {
input.classList.remove("invalide");
largeLetter.classList.remove("error");
input.classList.add("succes");
largeLetter.classList.add("succes");
} else {
input.classList.remove("succes");
largeLetter.classList.remove("succes");
input.classList.add("invalide");
largeLetter.classList.add("error");
}
if (/[a-z]{1}/.test(password.value)) {
input.classList.remove("invalide");
smallLetter.classList.remove("error");
input.classList.add("succes");
smallLetter.classList.add("succes");
} else {
input.classList.remove("succes");
smallLetter.classList.remove("succes");
input.classList.add("invalide");
smallLetter.classList.add("error");
}
if (password.value.length >= 8) {
generique.classList.remove("error");
generique.classList.add("succes");
} else {
generique.classList.add("error");
generique.classList.remove("succes");
}
}
function remove() {
input.classList.remove("invalide");
input.classList.remove("succes");
special.classList.remove("error");
special.classList.remove("succes");
number.classList.remove("error");
number.classList.remove("succes");
largeLetter.classList.remove("succes");
largeLetter.classList.remove("error");
smallLetter.classList.remove("succes");
smallLetter.classList.remove("error");
generique.classList.remove("succes");
generique.classList.remove("error");
}
input.addEventListener("input", function() {
validation(this);
if (!this.value) {
remove();
}
}); <div class="containerSignUp">
<div class="container-form">
<form action="index.php?action=newUser" class="group-form" method="post">
<div class="formSignUpContainer">
<div class="sliderSignUpSection">
<img src="www/images/signup.jpg" alt="fille sur une plage">
</div>
<div class="formSection2">
<h1>Création de votre compte</h1>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-user"></i>
</div>
<label for="family-name"></label>
<input type="text" id="family-name" name="family-name" placeholder="Nom" required="required"/>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-user"></i>
</div>
<label for="name0"></label>
<input type="text" id="name0" name="name" placeholder="Prenom" required="required"/>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-envelope"></i>
</div>
<label for="email0"></label>
<input type="email" id="email0" name="email" placeholder="Email" required="required"/>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-lock"></i>
</div>
<div class="block-input">
<label for="password0"></label>
<input type="password" id="password0" name="password" class="password-login" placeholder="Mot de passe" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[-+!*$@%_])([-+!*$@%_\w]{8,15})$" required="required"/>
</div>
</div>
<div class="validator-criters">
<div>
<span> Choisissez un mot de pass sécurisé, il doit contenir au moins :</span>
</div>
<div>
<span class="number"><i class="fas fa-check-circle"></i> 1 chiffres.</span>
</div>
<div>
<span class="special"><i class="fas fa-check-circle"></i> 1 caractère spécial.</span>
</div>
<div>
<span class="large-letter"><i class="fas fa-check-circle"></i> 1 majuscule.</span>
</div>
<div>
<span class="small-letter"><i class="fas fa-check-circle"></i> 1 minuscule.</span>
</div>
<div>
<span class="generique"><i class="fas fa-check-circle"></i> 8 caractères.</span>
</div>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-cake-candles"></i>
</div>
<label for="date"></label>
<input type="date" id="date" name="birth"
value=""
min="1930-01-01" max="2022-01-01" required="required">
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-house-user"></i>
</div>
<label for="address"></label>
<textarea placeholder="Adresse" id="address" name="address"
rows="5" cols="33" required="required"></textarea>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-city"></i>
</div>
<label for="city0"></label>
<input type="text" id="city0" name="city" placeholder="Ville" required="required"/>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-envelope"></i>
</div>
<label for="postal-code"></label>
<input type="text" id="postal-code" name="code-postal" placeholder="Code postal" required="required"/>
</div>
<div class="inputRow">
<div class="inputIcon">
<i class="fa-solid fa-phone"></i>
</div>
<label for="phone0"></label>
<input type="tel" id="phone0" name="phone" placeholder="Telephone" required="required"/>
</div>
<div class="btnRow">
<input type="submit" value="Créer votre compte" id="loginBtn">
</div>
<div class="btnRow">
<input type="reset" value="Annuler" id="resetBtn" >
</div>
</div>
</div>
</form>
</div>
</div>