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