HTML5 Validation: different behavior when custom validation message is set

Question

I've been working on this registration form where I use HTML5's validation checking. To show a custom error message when you don't match the required pattern, I have followed this post: How can I change or remove HTML5 form validation default error messages?

Now all functionalities work fine except this annoying problem I cannot solve: the popup bubble doesn't disappear automatically when the pattern do is matched. To explain the problem more I've made this JSFiddle: http://jsfiddle.net/Jeroen88/Lujt490o/ with following code:

<form>
<fieldset>
    <legend>Custom message</legend>
    <label for="password1">Password 1:</label>
    <input type="password" pattern=".{4,}" required id="password1"
        oninvalid="setCustomValidity('Password must be at least 4 characters')"
        onchange="try{setCustomValidity('')}catch(e){}" />
    <input type="submit" />
</fieldset>
</form>

As you can see, the validation message keeps appearing even after the pattern is matched. Working with the default error message does not describe this behavior!

<form>
<fieldset>
    <legend>Without custom message</legend>
    <label for="password2">Password 2:</label>
    <input type="password" pattern=".{4,}" required id="password2" />
    <input type="submit" />
</fieldset>
</form>

So my question is: how can I make the custom validation message have the same behavior as the default one?

Answer 1

The problem was solved by changing 'onchange' to 'oninput' and have a custom function handle the setCustomValidity correctly, like in this answer to another question by Rikin Patel:

HTML:

 <input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" /> 

JAVASCRIPT :

 function InvalidMsg(textbox) { if(textbox.validity.patternMismatch){ textbox.setCustomValidity('please enter 10 numeric value.'); } else { textbox.setCustomValidity(''); } return true; } 

Fiddle Demo