Question

如果用户输入两次相同的密码，我正在尝试测试。

但是，一旦.setCustomValidity被触发，如果输入了有效输入并按下了提交，它将不会重置为有效。

这是我的JSFIDDLE link的链接。 JSFIDDLE显示了一个我无法解决的错误。

这是我的HTML：

<p id="demo">&nbsp;   </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');                      

};
}

Answer 1

Problem solved in this question

Chrome以奇怪的方式处理.setCustomValidity。并且因为.setCustomValidity由浏览器处理，所以问题取决于浏览器。切换到完整的JS验证并删除使用.setCustomValidity修复问题的部分。

JSFIDDLE Example

.setCustomValidity;触发后不会重置

1 个答案: