[英]HTML5 Validation: different behavior when custom validation message is set
I've been working on this registration form where I use HTML5's validation checking. 我一直在处理此注册表单,在其中使用HTML5的验证检查。 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?
为了在您不匹配所需的模式时显示自定义错误消息,我关注了这篇文章: 如何更改或删除HTML5表单验证默认错误消息?
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:
为了进一步解释该问题,我制作了这个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>
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? 所以我的问题是:如何使自定义验证消息的行为与默认消息相同?
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: 通过将'onchange'更改为'oninput'并让自定义函数正确处理setCustomValidity可以解决该问题 ,例如Rikin Patel 对另一个问题的回答:
HTML:
HTML:
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT :
JAVASCRIPT:
function InvalidMsg(textbox) { if(textbox.validity.patternMismatch){ textbox.setCustomValidity('please enter 10 numeric value.'); } else { textbox.setCustomValidity(''); } return true; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.