为什么我的“oninvalid”属性让模式失败？

Question

这个小小的HTML5密码字段在没有on无效属性的情况下工作得非常好（模式是：至少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

我喜欢这样使用：

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

并拔掉所有有效输入数据的插头

UPD，为了更好地工作，还有一件事：

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("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>

Answer 3

如果使用setCustomValidity（）设置值，则该字段无效。即设置一个非零长度字符串使浏览器考虑字段无效。为了考虑任何其他验证的影响，您必须清除自定义有效性：

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