HTML5:为什么我的"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 .

但是当我添加一个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 .

你能发现错误吗？

Answer 1

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

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

Answer 2

由于我偶然发现了同样的问题,这是我的解决方案 - 测试并使用FF,Chrome,IE 10,Edge(2017年2月).

<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>

说明:

setCustomValidity(''); 删除自定义错误字符串,否则将始终在验证过程中导致无效字段.

checkValidity();进行手动验证 - 与表单子项中的相同.结果存储在validity.valid.

第二个setCustomValidity(validity.valid ? '' :'please enter 1234');现在根据验证结果设置错误字符串.如果该字段有效,则它必须为空,否则可以设置自定义错误字符串.