javascript - HTML5 验证 : different behavior when custom validation message is set

Question

我一直在使用 HTML5 的验证检查处理此注册表单。要在您不匹配所需模式时显示自定义错误消息，我已经关注了这篇文章: How can I change or remove HTML5 form validation default error messages?

现在所有功能都可以正常工作，除了这个我无法解决的恼人问题:当模式 do 匹配时，弹出气泡不会自动消失。为了更多地解释这个问题，我制作了这个 JSFiddle:http://jsfiddle.net/Jeroen88/Lujt490o/使用以下代码:

<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>

如您所见，即使在模式匹配后验证消息仍会继续出现。使用默认错误消息不会描述此行为!

<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>

所以我的问题是:如何使自定义验证消息具有与默认验证消息相同的行为？

Answer 1

通过将 'onchange' 更改为 'oninput' 并让自定义函数正确处理 setCustomValidity 解决了这个问题，如 this answer to another question作者: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