HTML 5輸入檢查：驗證消息僅通過重複調用出現

Question

我有一個包含兩個密碼字段（密碼，密碼確認）的表單。我需要將他們關於不同值的問題看作是標準的HTML-5彈出消息（請參閱插圖）。 爲此，我已將html5/JS函數setCustomValidity（）附加到password2字段。 Form.submin（）觸發檢查。但問題是，如果值不同，則消息僅從嘗試＃2開始。即初始事件什麼也不做 - 表單不發送數據，但消息也不會出現。如果我重複一遍，它就會出現。 我沒有任何適當的想法爲什麼。你做？ 以下是完整的內碼：

<script> 
function validateForm(){ 

    var pass1=document.getElementById('password1'); 
    var pass2=document.getElementById('password2'); 

    var pass1Val=pass1.value; 
    var pass2Val=pass2.value; 

    if(pass1Val&&pass2Val&&(pass1Val!=pass2Val)){ 
     pass2.setCustomValidity("The password confirmation is different to the password value"); 
     return false; 
    }  
} 
</script> 
<form id="user-form" action="#" method="post" enctype="text/plain" onSubmit="return validateForm();"> 
Email:  <input type="email" id="emailField" required="required"> <br> 
Tel:  <input type="tel" id="phoneField" required="required"> <br> 
Password: <input type="password" id="password1" required="required"> <br> 
Password2: <input type="password" id="password2" required="required"><br> <input type="submit" value="Send!"> </form> 

Answer 1

您之前提交不必setCustomValidity上的提交事件。

<form id="user-form" action="#" method="post" enctype="text/plain"> 
Email:  <input type="email" id="emailField" required="required"> <br> 
Tel:  <input type="tel" id="phoneField" required="required"> <br> 
Password: <input type="password" id="password1" required="required"> <br> 
Password2: <input type="password" id="password2" required="required"><br> <input type="submit" value="Send!"> </form> 
<script> 
(function(){ 
if(!document.createElement('input').setCustomValidity){return;} 
var pass1=document.getElementById('password1'); 
var pass2 = document.getElementById('password2'); 
function validateForm(){ 

    var pass1=document.getElementById('password1'); 

    var pass1Val=pass1.value; 
    var pass2Val=pass2.value; 

    if(pass1Val&&pass2Val&&(pass1Val!=pass2Val)){ 
     pass2.setCustomValidity("The password confirmation is different to the password value"); 
    } else { 
     pass2.setCustomValidity(""); 
    } 
} 

if(pass1 && pass2){ 
    pass1.addEventListener('change', validateForm, false); 
    pass2.addEventListener('change', validateForm, false); 

    validateForm(); 
} 
})(); 

</script>