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: Why does my "oninvalid" attribute let the pattern fail?

如果您设置字段setcustomvalidity，你的领域是无效的......并保持无效。您需要强制行为，回到它的原单，带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中。