Question

我一直在使用此注册表单，我使用HTML5的验证检查。要在不符合要求的模式时显示自定义错误消息，我已按照以下帖子操作： How can I change or remove HTML5 form validation default error messages?

现在所有的功能都运行正常，除了这个我无法解决的烦人问题：当模式匹配时，弹出气泡不会自动消失。为了解释这个问题，我已经使用以下代码创建了这个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来解决问题，例如Rikin Patel在this answer to another question中：

<强> 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验证：设置自定义验证消息时的不同行为

1 个答案: