.setCustomValidity;触发后不会重置

时间:2014-06-12 18:28:55

标签: javascript html validation

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

但是,一旦.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');                      

};
}                               

1 个答案:

答案 0 :(得分:1)

Problem solved in this question

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

JSFIDDLE Example