(adsbygoogle = window.adsbygoogle || []).push({}); 如何解決HTML5表單必填屬性設(shè)置自定義驗證消息？？

用途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，但如有必要，您應(yīng)該可以設(shè)計出等效的Mootools。

我在這里更新了代碼，其setCustomValidity工作方式與我最初回答時所了解的略有不同。如果setCustomValidity設(shè)置為空字符串以外的任何其他值，則將導(dǎo)致該字段被視為無效；因此，您必須在測試有效性之前清除它，而不能只是設(shè)置它而忘記。

正如下面@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'/>

目前，當(dāng)我將兩個都空白時按Enter鍵時，會出現(xiàn)一個彈出框，提示“請?zhí)顚懘俗侄巍薄Ｈ绾螌⒛J消息更改為“此字段不能為空”？

還請注意，類型密碼字段的錯誤消息很簡單*****。要重新創(chuàng)建此名稱，請為用戶名指定一個值，然后單擊“提交”。

我正在使用Chrome 10進行測試。請同樣做