我有以下HTML5形式:http://jsfiddle.net/nfgfP/

<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”

目前,当我点击enter时,它们都是空白的,弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?

编辑:还要注意,类型密码字段的错误消息仅仅是*****。为了重新创建这个,给用户名一个值并点击submit。

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


当前回答

注意:这不再工作在Chrome,没有测试在其他浏览器。见下面的编辑。这个答案留作历史参考。

如果您觉得验证字符串真的不应该由代码设置,您可以将输入元素的title属性设置为“此字段不能留空”。(适用于Chrome 10)

title="This field should not be left blank."

参见http://jsfiddle.net/kaleb/nfgfP/8/

在Firefox中,你可以添加这个属性:

x-moz-errormessage="This field should not be left blank."

Edit

自从我最初写下这个答案以来,这似乎已经改变了。现在添加标题并不会改变有效性消息,它只是向消息添加了一个附录。上述说法仍然适用。

编辑2

Chrome现在不做任何与标题属性的Chrome 51。我不确定这在哪个版本中发生了变化。

其他回答

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

代码如下:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

下面是在HTML5中处理自定义错误消息的代码:

<input type="text" id="username" required placeholder="Enter Name" oninvalid = "。setCustomValidity('在这里输入用户名')" oninput = " this.setCustomValidity (")" / >

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

oninput="this.setCustomValidity('')"

通过在正确的时间设置和取消设置setCustomValidity,验证消息将完美地工作。

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

我使用了onchange而不是oninput,后者更通用,当值在任何情况下发生变化时,即使是通过JavaScript。

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

})

好吧,oninvalid工作得很好,但它显示错误,即使用户输入有效的数据。所以我用下面的方法来解决这个问题,希望它对你也有用,

oninvalid=“this.setCustomValidity('Your Custom message.')” onkeyup=“setCustomValidity('')”