我有以下HTML5形式:http://jsfiddle.net/nfgfP/
<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”
目前，当我点击enter时，它们都是空白的，弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?
编辑:还要注意，类型密码字段的错误消息仅仅是*****。为了重新创建这个，给用户名一个值并点击submit。
编辑:我使用Chrome 10进行测试。请也这样做
当前回答
在HTML5 oninvalid事件的帮助下控制自定义消息非常简单
代码如下:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
其他回答
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('');
}
})
通过在正确的时间设置和取消设置setCustomValidity，验证消息将完美地工作。
<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />
我使用了onchange而不是oninput，后者更通用，当值在任何情况下发生变化时，即使是通过JavaScript。
可以通过在字段中添加'title'来轻松处理:
<input type="text" id="username" required title="This field can not be empty" />
好吧，oninvalid工作得很好，但它显示错误，即使用户输入有效的数据。所以我用下面的方法来解决这个问题，希望它对你也有用，
oninvalid=“this.setCustomValidity（'Your Custom message.'）” onkeyup=“setCustomValidity（''）”
我有一个更简单的香草js唯一的解决方案:
复选框:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};
输入:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
