複数入力のフォーム検証js

Question

いくつかの形式でパスワード入力を確認したいと思います。エラーメッセージは表示されませんが、なぜ動作しないのか分かりません。任意のアイデアをどのように修正するには？ jsのコードのおかげでは

Link:link

Answer 1

少数の訂正：下記参照スニペット：var pgMsg = document.querySelector(".form-element p");

var error = ""; 
 
var passwordInputs = document.querySelectorAll('input[type=password]'); 
 

 
if (passwordInputs.length > 1) { 
 
    for (var i = 0; i < passwordInputs.length; i++) { 
 
     var passwordInputsList = passwordInputs[i]; 
 
     passwordInputsList.addEventListener("blur", passwordCheck, false); 
 
    } 
 
} 
 

 
function passwordCheck() { 
 
    if (this.value.length < 8) { 
 
     error = "Password is too short"; 
 
     var pgMsg = document.querySelector(".form-element p"); 
 
     pgMsg.textContent = error; 
 
     console.log(pgMsg.textContent); 
 
    } 
 
}

<div class="form-element"> 
 
    <label for="register-password"></label> 
 
    <img src="img/Icons/password.png" alt="Password Icon"> 
 
    <input type="password" name="password" id="register-password" placeholder="Password"> 
 
    <p class="pg-valid" id="pg-valid"></p> 
 
</div> 
 

 
<div class="form-element"> 
 
    <label for="register-password-repeat"></label> 
 
    <img src="img/Icons/password.png" alt="Password Icon"> 
 
    <input type="password" name="password-repeat" id="register-password-repeat" placeholder="Confirm Password"> 
 
</div> 
 

 
<div class="form-element"> 
 
    <label for="signin-password"></label> 
 
    <img src="img/Icons/password.png" alt="Password Icon"> 
 
    <input type="password" id="signin-password" name="password" placeholder="Password"> 
 
</div>

から this.value.length

var pgMsg = document.querySelector(".form-container p");へ