我有以下HTML5形式:http://jsfiddle.net/nfgfP/
<form id=“onsubmit”=“return(登录)“> <输入=“用户名” <输入=“pass”类型=“密码” <br/> reminme: <输入类型=“checkbox” <输入类型=“submit”
目前，当我点击enter时，它们都是空白的，弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?
编辑:还要注意，类型密码字段的错误消息仅仅是*****。为了重新创建这个，给用户名一个值并点击submit。
编辑:我使用Chrome 10进行测试。请也这样做
当前回答
使用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处理程序来清除它。
其他回答
我做了一个小库来简化错误消息的更改和翻译。你甚至可以改变文本的错误类型，这是目前不可用的标题在Chrome或x-moz-errormessage在Firefox。去GitHub上看看，并给出反馈。
它的用法如下:
<input type="email" required data-errormessage-value-missing="Please input something">
jsFiddle上有一个演示版本。
对于一个完整的自定义检查逻辑:
$(document).ready(function() { $('#form').on('submit', function(e) { if ($('#customCheck').val() != 'apple') { $('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word'); $('#customCheck')[0].reportValidity(); e.preventDefault(); } }); $('#customCheck').on('input', function() { $('#customCheck')[0].setCustomValidity(''); }); }); input { display: block; margin-top: 15px; } input[type="text"] { min-width: 250px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <input type="text" placeholder="dafault check with 'required' TAG" required/> <input type="text" placeholder="custom check for word 'apple'" id="customCheck" /> <input type="submit"> </form>
注意:这不再工作在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。我不确定这在哪个版本中发生了变化。
可以通过在字段中添加'title'来轻松处理:
<input type="text" id="username" required title="This field can not be empty" />
在HTML5 oninvalid事件的帮助下控制自定义消息非常简单
代码如下:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
