CODEWITHSUNDEEP
javascripthtmlvalidation
WhiteShadow
WhiteShadow

Reputation: 323

.setCustomValidity; Will Not Reset After Triggering

I'm trying test if the user enters the same password twice.

However once .setCustomValidity is triggered it will not reset to valid if valid input is entered and submit is pressed.

Here is a link to my JSFIDDLE link. JSFIDDLE shows an error that I cant make out.

here is my 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>

The two inputs are Pass and PassRe by their given Id's.

The JS tests if the two inputs are equal to one another.

If they are not equal the script sets the .setCustomValidity and the demo text to show the error.

(Or at last that is what I want it to do.)

And my 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');                      

};
}

Upvotes: 4

Views: 5809

Answers (2)

zax
zax

Reputation: 946

The answer is simpler than you think.

.setCustomValidity("")

is not the same as

.setCustomValidity(" ")

I was going completely crazy until I found out that one must explicitly include whitespace for the popup reset to work as expected.

Upvotes: 2

WhiteShadow
WhiteShadow

Reputation: 323

Problem solved in this question

Chrome handles .setCustomValidity in a odd way. And because the .setCustomValidity is handled by the browser the issue is browser dependent. Switched to full JS validation and removed parts that used .setCustomValidity to fix problem.

JSFIDDLE Example

Upvotes: 1

Related Questions