HTML5 表单必需属性。设置自定义验证消息？

Question

我有以下 HTML5 表单：http: //jsfiddle.net/nfgfP/

<form id="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 进行测试。请做同样的事情

原文由 Skizit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 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("");
 };
 }
 })

我按照 @itpastor 在评论中的建议从 Mootools 更改为 vanilla JavaScript ，但如果需要，您应该能够计算出 Mootools 等效项。

编辑

我在这里更新了代码，因为 setCustomValidity 的工作方式与我最初回答时的理解略有不同。如果 setCustomValidity 设置为空字符串以外的任何内容，则会导致该字段被视为无效；所以你必须在测试有效性之前清除它，你不能只是设置它而忘记。

进一步编辑

正如下面@thomasvdb 的评论中所指出的，您需要在 invalid 之外的某些事件中清除自定义有效性，否则可能需要额外通过 oninvalid 处理程序来清除它。

原文由 robertc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

下面是在 HTML5 中处理自定义错误消息的代码：

 <input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

这部分很重要，因为它隐藏了用户输入新数据时的错误消息：

 oninput="this.setCustomValidity('')"

原文由 Somnath Kadam 发布，翻译遵循 CC BY-SA 4.0 许可协议