html5 属性模式有问题吗？

Question

以下输入字段无法正常工作。

<input id="textinput" oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" pattern=".{5}" maxlength="255" required="" name="input[1164]" type="text" class="form-control input-md " value="">

什么有效？

输入正确数量的字符并提交。

什么不起作用？

例如输入错误的金额，点击提交。显示预期的错误消息后，我无法达到正确数量的字符或正确填写输入（以防它不取决于字符数量）。

我用什么浏览器来验证这个错误？

Chrome 和 Firefox，均在最后一个稳定版本中。

想现场观看吗？

http://jsfiddle.net/0efurqa9/

Answer 1

答案已经存在:)

HTML5: Why does my "oninvalid" attribute let the pattern fail?

如果您将字段设置为 setcustomvalidity，则您的字段无效...并且 STAYS 无效。您需要使用oninput="setCustomValidity('')" 将行为强制恢复为原始行为，如下所示：

<form>
  <input id="textinput" 
    oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" 
    oninput="setCustomValidity('')" required="required" pattern=".{5}" 
    maxlength="255" name="input[1164]" type="text" class="form-control input-md " 
    value="">
  <input type="submit">
</form>

还有：

• 我建议使用required="required" 而不是required=""
• 注意：Internet Explorer 9 和 Safari 都不支持此属性。