HTML5表單必填屬性。設置自定義驗證消息?
用途setCustomValidity):
document.addEventListener('DOMContentLoaded', function() { var elements = document.getElementsByTagName('INPUT'); for (var i = 0; i < elements.length; i++) {elements[i].oninvalid = function(e) { e.target.setCustomValidity(''); if (!e.target.validity.valid) {e.target.setCustomValidity('This field cannot be left blank'); }};elements[i].oninput = function(e) { e.target.setCustomValidity('');}; }})
我已按照@itpastorn在評論中的建議,從Mootools更改為VanillaJavaScript,但如有必要,您應該可以設計出等效的Mootools。
我在這里更新了代碼,其setCustomValidity工作方式與我最初回答時所了解的略有不同。如果setCustomValidity設置為空字符串以外的任何其他值,則將導致該字段被視為無效;因此,您必須在測試有效性之前清除它,而不能只是設置它而忘記。
正如下面@thomasvdb的注釋中指出的那樣,您需要在某些事件之外清除自定義有效性,invalid否則可能需要通過oninvalid處理程序進行額外的清除操作。
解決方法我有以下HTML5表單:
<form onsubmit='return(login())'><input name='username' placeholder='Username' required /><input name='pass' type='password' placeholder='Password' required/><br/>Remember me: <input type='checkbox' name='remember' value='true' /><br/><input type='submit' name='submit' value='Log In'/>
目前,當我將兩個都空白時按Enter鍵時,會出現一個彈出框,提示“請填寫此字段”。如何將默認消息更改為“此字段不能為空”?
還請注意,類型密碼字段的錯誤消息很簡單*****。要重新創建此名稱,請為用戶名指定一個值,然后單擊“提交”。
我正在使用Chrome 10進行測試。請同樣做
相關文章:
1. android - weex 項目createInstanceReferenceError: Vue is not defined2. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯,是什么情況?求大神指點3. pdo 寫入到數據庫的內容為中文的時候寫入亂碼4. PHPExcel表格導入數據庫怎么導入5. javascript - 如圖,百度首頁,查看源代碼為什么什么都沒有?6. vue2.0+webpack 如何使用bootstrap?7. PHP類封裝的插入數據,總是插入不成功,返回false;8. mac連接阿里云docker集群,已經卡了2天了,求問?9. python - 小白django提交數據后,沒有存儲到數據庫(查閱資料并沒有發現問題)10. javascript - 前端開發框架express,在他的模板引擎下怎么給按鈕添加綁定事件?
