HTML5:为什么我的“oninvalid”属性让模式失败?

前端之家收集整理的这篇文章主要介绍了HTML5:为什么我的“oninvalid”属性让模式失败?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个小的HTML5密码字段完全符合oninvalid属性(模式说:最少6个字符):
<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

看到j​​sFiddle here

但是当我添加一个无效的属性,当用户的输入不符合模式时,会发出自定义错误消息,整个字段永远不会变为有效,请参见以下代码

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

看到j​​sFiddle here

你能发现错误吗?

解决方法

如果使用setCustomValidity()设置值,则该字段无效。这是设置非零长度字符串导致浏览器将该字段视为无效。为了允许任何其他验证的效果,您必须清除自定义有效性:
<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />
原文链接:https://www.f2er.com/html5/169251.html

猜你在找的HTML5相关文章