我有以下HTML5形式:http://jsfiddle.net/nfgfP/
<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”
目前，当我点击enter时，它们都是空白的，弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?
编辑:还要注意，类型密码字段的错误消息仅仅是*****。为了重新创建这个，给用户名一个值并点击submit。
编辑:我使用Chrome 10进行测试。请也这样做
当前回答
我有一个更简单的香草js唯一的解决方案:
复选框:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};
输入:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
其他回答
在HTML5 oninvalid事件的帮助下控制自定义消息非常简单
代码如下:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
使用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换成了普通的JavaScript，但如果有必要，你应该能够找到Mootools的等效版本。
Edit
我在这里更新了代码，因为setCustomValidity的工作方式与我最初回答时的理解略有不同。如果setCustomValidity被设置为空字符串以外的任何值，将导致该字段被认为无效;因此，您必须在测试有效性之前清除它，您不能只是设置它然后忘记。
进一步的编辑
正如下面@thomasvdb的评论中指出的那样，你需要在无效之外的一些事件中清除自定义有效性，否则可能会通过oninvalid处理程序来清除它。
const username= document.querySelector('#username');
const submit=document.querySelector('#submit');
submit.addEventListener('click',()=>{
if(username.validity.typeMismatch){
username.setCustomValidity('Please enter User Name');
}else{
username.setCustomValidity('');
}
if(pass.validity.typeMismatch){
pass.setCustomValidity('Please enter Password');
}else{
pass.setCustomValidity('');
}
})
我发现的最简单、最干净的方法是使用数据属性来存储自定义错误。测试节点的有效性，并使用一些自定义html处理错误。
le javascript
if(node.validity.patternMismatch)
{
message = node.dataset.patternError;
}
以及一些超级HTML5
<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>
在HTML5 event oninvalid的帮助下控制自定义消息是非常简单的
下面是代码:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
这是最重要的:
onvalid="this.setCustomValidity('')"
