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

};
}                               

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

};
}                               

• javascript
• html
• validation

Share Improve this question Follow edited Jul 26, 2017 at 17:16 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Jun 12, 2014 at 18:28 WhiteShadowWhiteShadow 33344 silver badges1818 bronze badges 4

• 1 The jsfiddle does not run validateInput because it is defined as a local function. This is caused by the use of the “onLoad” option. Here’s working jsfiddle: jsfiddle/7GjvL – Jukka K. Korpela Commented Jun 12, 2014 at 18:46
• @JukkaK.Korpela Thanks but,it still is not resetting after an invalid input is entered. What did you have to change to make the JS load? – WhiteShadow Commented Jun 12, 2014 at 18:49
• 1 Possible duplicate of stackoverflow./questions/7357192/… – Jukka K. Korpela Commented Jun 12, 2014 at 18:53
• @JukkaK.Korpela I see what was changed the JSFIDDLE option. I will look at that duplicate thank you. – WhiteShadow Commented Jun 12, 2014 at 18:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The answer is simpler than you think.

.setCustomValidity("")

is not the same as

.setCustomValidity(" ")

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

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