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

Question

HTML 5表单必需的属性。设置自定义验证消息？我有以下HTML 5表单：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时，它们都是空的，弹出框将显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”？编辑：还请注意，类型密码字段的错误消息很简单*****..要重新创建它，给用户名一个值，然后点击Submit。编辑：我用Chrome 10进行测试。请做同样的事

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

I 改为香草JavaScript来自Mootools的@itastorn在注释中，但是如果需要的话，您应该能够计算出等效的Mootools。

编辑

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

进一步编辑

如下面@thomasvdb的注释中所指出的，在某些情况下，您需要清除invalid否则，可能会有一个额外的通行证通过oninvalid处理程序来清除它。

Answer 2

下面是处理自定义错误消息的代码HTML 5

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

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

oninput="this.setCustomValidity('')"

Answer 3

的帮助下控制自定义消息非常简单HTML5事件oninvalid

这是代码：

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

这是最重要的：

onvalid="this.setCustomValidity('')"