是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="">

什么在起作用

输入适当数量的字符并提交。

什么不起作用

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

我用了哪些浏览器来修复这个bug

Chrome和Firefox，都是最新的稳定版本。

想看现场直播吗

http://jsfiddle.net/0efurqa9/

Answer 1

答案已存在：）

HTML5：为什么我的"oninvalid"；属性让模式失败？

如果您将字段设置为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都不支持此属性