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?

Did you try [this answer](http://stackoverflow.com/a/22395060/7724)? — bzlm, Sep 10 '14 at 21:45
@bzlm Thank you, I will try this. The demo seems to exhibit the correct bahavior. — JeroenD, Sep 10 '14 at 21:52
@bzlm YES! It works! I have tested my (more elaborate) code and turns out that simply changing 'onchange' to 'oninput' does the trick! But any idea why that is? Anyway, thank you very much. How should I mark your answer as the solution? — JeroenD, Sep 10 '14 at 22:13

score 2 · Accepted Answer · edited May 23 '17 at 12:23

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

HTML5 Validation: different behavior when custom validation message is set

1 Answers1