HTML5表单所需的属性。 设置自定义validation消息？
我有以下的HTML5表单： http : //jsfiddle.net/nfgfP/
<form id="form" onsubmit="return(login())"> <input name="username" placeholder="Username" required /> <input name="pass" type="password" placeholder="Password" required/> <br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/> <input type="submit" name="submit" value="Log In"/> 目前当他们都是空白的时候，当他们input时，会出现一个popup框，提示“请填写此字段”。 如何将该默认信息更改为“此字段不能留空”？
编辑：另请注意，types密码字段的错误信息是简单的***** 。 重新创build这个给用户名一个值并点击提交。
编辑 ：我正在使用Chrome 10进行testing。 请做同样的事情
使用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的build议，我从Mootools 更改为vanilla JavaScript ，但是如果需要的话，您应该能够制定出Mootools的等价物。
编辑
我在这里更新了代码，因为setCustomValidity作用与我最初回答时所理解的略有不同。 如果setCustomValidity设置为除空string以外的任何内容，则会导致该字段被视为无效; 因此你必须在testing有效性之前清除它，你不能只是设置它而忘记。
进一步编辑
正如在下面的@ thomasvdb的注释中所指出的那样，你需要在invalid之外的某个事件中清除自定义有效性，否则可能会有一个额外的通过oninvalid处理程序来清除它。
这里是处理HTML5中的自定义错误消息的代码
<input type="text" id="username" required placeholder="Enter Name" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" />
这是最重要的部分：
oninput="setCustomValidity('')"
使用oninvalid的HTML5事件来控制自定义消息非常简单
这是代码：
<input id="UserID" type="text" required="required" oninvalid="this.setCustomValidity('Witinnovation')">
注意：这不再适用于Chrome，未在其他浏览器中testing过。 请参阅下面的编辑。 这个答案留在这里供历史参考。
如果您觉得validationstring确实不应该由代码设置，则可以将input元素的标题属性设置为“此字段不能留空”。 （在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."
编辑
自从我写这个答案以来，这似乎已经改变了。 现在添加标题不会改变有效性的消息，它只是添加一个附录到消息。 上面的小提琴仍然适用。
编辑2
Chrome现在对Chrome 51的标题属性没有任何帮助。我不确定这个版本在哪个版本中发生了变化。
我制作了一个小型图书馆，以便于更改和翻译错误信息。 您甚至可以通过错误types更改文本，这种错误types目前在Chrome中使用title或Firefox中的x-moz-errormessage用。 去GitHub检查一下 ，并给予反馈。
它的用法如下：
<input type="email" required data-errormessage-value-missing="Please input something">
有一个在jsFiddle的演示 。
借助HTML5 oninvalid事件来控制自定义消息非常简单
这里是代码：
User ID <input id="UserID" type="text" required oninvalid="this.setCustomValidity('User ID is a must')">
通过在适当的时间设置和setCustomValidity设置，validation信息将完美地工作。
<input name="Username" required oninvalid="this.setCustomValidity('Username cannot be empty.')" onchange="this.setCustomValidity('')" type="text" />
我使用onchange而不是oninput ，这是更一般的，并发生在任何情况下，甚至通过JavaScript改变的值。
试试这个，更好，经过testing：
HTML：
<form id="myform"> <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" /> <input type="submit" /> </form>
JAVASCRIPT：
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; }
演示：
我发现的最简单和最清洁的方法是使用数据属性来存储您的自定义错误。 testing节点的有效性，并使用一些自定义的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="[Az ']*" required>
我有一个简单的香草js唯一的解决scheme：
对于checkbox：
document.getElementById("id").oninvalid = function () { this.setCustomValidity(this.checked ? '' : 'My message'); };
对于input：
document.getElementById("id").oninvalid = function () { this.setCustomValidity(this.value ? '' : 'My message'); };
这是非常简单的控制HTMLinputtypes所需的消息。 不需要JS，或CSS只使用HTML5。
首先你可以使用这个“oninvalid”属性
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">
或者你可以使用“oninput”属性
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
