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中。