我得到了以下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时,会出现一个弹出框,上面写着“请填写此字段”。如何将默认消息更改为“此字段不能留空”?
编辑:还注意到类型密码字段的错误消息是简单的*****
。要重新创建它,给username一个值,然后点击submit。
编辑:我正在使用Chrome10进行测试。请做同样的事
发布于 2011-03-12 02:14:12
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获得了changed to vanilla JavaScript,但如果需要的话,你应该能够计算出Mootools的等价物。
编辑
我已经更新了这里的代码,因为setCustomValidity
的工作方式与我最初回答时所理解的略有不同。如果setCustomValidity
被设置为空字符串以外的任何值,它将导致该字段被视为无效;因此,您必须在测试有效性之前清除它,您不能只设置它就忘记它。
进一步编辑
正如@thomasvdb在下面的注释中所指出的,您需要在invalid
之外的某些事件中清除自定义有效性,否则可能需要通过oninvalid
处理程序额外传递来清除它。
发布于 2013-11-25 17:52:57
下面是在HTML5中处理自定义错误消息的代码:
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"/>
这一部分很重要,因为当用户输入新数据时,它会隐藏错误消息:
oninput="this.setCustomValidity('')"
发布于 2012-08-13 20:50:43
在HTML5
event oninvalid
的帮助下,控制自定义消息非常简单
下面是代码:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
这是最重要的:
onvalid="this.setCustomValidity('')"
https://stackoverflow.com/questions/5272433
复制相似问题