为什么我的“ 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&nbsp; &nbsp;oninvalid="setCustomValidity('Minimum length is 6 characters')"&nbsp;&nbsp; &nbsp;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');现在根据验证结果设置错误字符串。如果该字段有效，则必须为空，否则可以设置自定义错误字符串。