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

问题描述

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

<input name="username" placeholder="Username" required/><input name="pass" type="password" placeholder="Password" required/><br/>记住我:<input type="checkbox" name="remember" value="true"/><br/><input type="submit" name="submit" value="登录"/>

目前，当我在它们都是空白的情况下按 Enter 键时，会出现一个弹出框，上面写着请填写此字段".我如何将该默认消息更改为此字段不能为空"?

另请注意，类型密码字段的错误消息只是 *****.要重新创建它，请给用户名一个值并点击提交.

编辑:我使用 Chrome 10 进行测试.请也这样做

解决方案

使用 setCustomValidity:

document.addEventListener(DOMContentLoaded", function() {var elements = document.getElementsByTagName(输入");for (var i = 0; i 

我按照 @itpastorn 在评论中，但您应该能够计算出 Mootools 等效项如有必要.

编辑

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

进一步编辑

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

I've got the following HTML5 form: 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"/>

Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot be left blank"?

EDIT: Also note that the type password field's error message is simply *****. To recreate this give the username a value and hit submit.

EDIT: I'm using Chrome 10 for testing. Please do the same

解决方案

Use 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 changed to vanilla JavaScript from Mootools as suggested by @itpastorn in the comments, but you should be able to work out the Mootools equivalent if necessary.

Edit

I've updated the code here as setCustomValidity works slightly differently to what I understood when I originally answered. If setCustomValidity is set to anything other than the empty string it will cause the field to be considered invalid; therefore you must clear it before testing validity, you can't just set it and forget.

Further edit

As pointed out in @thomasvdb's comment below, you need to clear the custom validity in some event outside of invalid otherwise there may be an extra pass through the oninvalid handler to clear it.

这篇关于HTML5 表单必需属性.设置自定义验证消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！