html - 为什么我的 "oninvalid"属性让模式失败？

Question

这个小的 HTML5 密码字段在没有 oninvalid 属性的情况下工作得很好(模式说:最少 6 个字符):

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

参见 jsFiddle here .

但是当我添加一个 oninvalid 属性时，当用户的输入不符合模式时会发出自定义错误消息，整个字段永远不会变得有效，请参阅此处的代码:

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

参见 jsFiddle here .

你能找出错误吗？

Answer 1

如果您使用 setCustomValidity() 设置值，则该字段无效。即设置非零长度字符串会导致浏览器认为该字段无效。为了允许任何其他验证的效果，您必须清除自定义有效性:

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