如果用户输入两次相同的密码,我正在尝试测试。
但是,一旦.setCustomValidity
被触发,如果输入了有效输入并按下了提交,它将不会重置为有效。
这是我的JSFIDDLE link的链接。 JSFIDDLE显示了一个我无法解决的错误。
这是我的HTML:
<p id="demo"> </p>
<table>
<form onsubmit="validateInput(); return false" method=post >
<tr>
<td>Password</td>
<td><input Id="Pass" name="Pass" type="password" required
placeholder="Secret" ></td>
</tr>
<tr>
<td>Retype Password</td>
<td><input Id="PassRe" name="PassRe" type="password" required
placeholder="Secret" ></td>
<tr>
<td></td>
<td>
<input type="submit" class="Button" value="Submit">
<input type="reset" class="Button" value="Clear" name="ResetBtn">
</td>
</tr>
</form>
</table>
这两个输入是Pass和PassRe的给定ID。
JS测试两个输入是否相等。
如果它们不相等,脚本会设置.setCustomValidity和demo
文本以显示错误。
(或者最后这就是我想要的。)
我的JS
function validateInput() {
var Pass1 = document.getElementById("Pass").value;
var Pass2 = document.getElementById("PassRe").value;
if(Pass1 == Pass2){
document.getElementById("PassRe").setCustomValidity('');
document.getElementById("demo").innerHTML= ('');
}else{
document.getElementById("PassRe").setCustomValidity('The passwords dont match');
document.getElementById("demo").innerHTML= ('The passwords dont match');
};
}
答案 0 :(得分:1)
Problem solved in this question
Chrome以奇怪的方式处理.setCustomValidity
。
并且因为.setCustomValidity
由浏览器处理,所以问题取决于浏览器。
切换到完整的JS验证并删除使用.setCustomValidity
修复问题的部分。