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

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

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

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

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


当前回答

试试这个,它更好,而且经过测试:

function InvalidMsg(textbox) { if (textbox.value === '') { textbox.setCustomValidity('Required email address'); } else if (textbox.validity.typeMismatch){ textbox.setCustomValidity('please enter a valid email address'); } else { textbox.setCustomValidity(''); } return true; } <form id="myform"> <input id="email" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="email" type="email" required="required" /> <input type="submit" /> </form>

演示:

http://jsfiddle.net/patelriki13/Sqq8e/

其他回答

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

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

试试这个,它更好,而且经过测试:

function InvalidMsg(textbox) { if (textbox.value === '') { textbox.setCustomValidity('Required email address'); } else if (textbox.validity.typeMismatch){ textbox.setCustomValidity('please enter a valid email address'); } else { textbox.setCustomValidity(''); } return true; } <form id="myform"> <input id="email" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="email" type="email" required="required" /> <input type="submit" /> </form>

演示:

http://jsfiddle.net/patelriki13/Sqq8e/

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

代码如下:

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

我有一个更简单的香草js唯一的解决方案:

复选框:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

输入:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};

我做了一个小库来简化错误消息的更改和翻译。你甚至可以改变文本的错误类型,这是目前不可用的标题在Chrome或x-moz-errormessage在Firefox。去GitHub上看看,并给出反馈。

它的用法如下:

<input type="email" required data-errormessage-value-missing="Please input something">

jsFiddle上有一个演示版本。