各種HTML5驗證屬性的自定義錯誤消息

Question

當輸入控件上的驗證失敗時，是否有方法提供自定義消息（錯誤消息）？

如：

<input type="number" value="" min="1" max="5"> 

輸入值10，然後提交它顯示 「請選擇一個值，該值不超過5個」

這可以使用JavaScript來完成，但我的形式對沒有第三方庫的HTML5方式非常感興趣。

我無法在HTML5文檔中找到與錯誤消息相關的屬性。

Answer 1

您可以檢查它們是否與特定模式匹配，如果是，則使提交按鈕可見。

欲瞭解更多信息，請參閱：http://www.the-art-of-web.com/html/html5-form-validation/

例子：

input:required:invalid, 
 
input:focus:invalid { 
 
    border: 1px solid red; 
 
} 
 
input:required:valid { 
 
    border: 1px solid green; 
 
} 
 
input[type="submit"] { 
 
    display: none; 
 
} 
 
input:required:valid ~ input[type="submit"] { 
 
    display: block; 
 
}

<b>Website:</b> 
 
<input type="url" name="website" required pattern="https?://.+"> 
 
<input type="submit"><br/> 
 
<i>Submit is only visible when you fill in a website starting with: http(s)://</i>