issue with setCustomValidity

Question

私は単純なif文を書いて、各入力ボックスのパスワードが一致するかどうかをテストします。両方が一致する場合はエラーはなく、一致しない場合は.setCustomValidity（）を使用して「一致しません」というエラーが表示されます。私が抱えている問題は、エラーが与えられた後、パスワードが一致するように修正されたときで、エラーはまだ出ています。私は何が間違っているのか分かりません。以下は私のコードと実際のJSfiddleへのリンクです。

JSfiddle：https://jsfiddle.net/1934foej/

HTML：

<label> 
    <input id="first" type="text" min="16" max="100" placeholder="New password" autofocus required> 
</label> 
<label> 
    <input id="second" type="text" min="16" max="100" placeholder="Repeat password" required> 
</label> 

<input id="submit" type="submit"> 

JS：

var firstPasswordInput = document.querySelector('#first'); 
var secondPasswordInput = document.querySelector('#second'); 
var submit = document.querySelector('#submit'); 


submit.onclick = function() { 
    var firstPassword = firstPasswordInput; 
    var secondPassword = secondPasswordInput; 

    //checks for match 
    if(firstPassword.value !== secondPassword.value) { 
     firstPasswordInput.setCustomValidity("they do not match"); 
     } 
} 

Answer 1

あなたは空の文字列に設定していないので、あなたがやっているエラーがcustomValidityが"they do not match"のままである（これはブラウザは検証に成功したとみなします）、入力が1回の検証に失敗した後も同じ状態を維持します。

submit.onclick = function() { 

    // there is no need to redefine these two variables 
    var firstPassword = firstPasswordInput; 
    var secondPassword = secondPasswordInput;  

    if(firstPassword.value !== secondPassword.value) { 
     firstPassword.setCustomValidity("they do not match"); 
    } 
    //add this part 
    else { 
     firstPassword.setCustomValidity(""); 
    } 

}