HTML 5表单必需的属性。设置自定义验证消息？

Question

HTML 5表单必需的属性。设置自定义验证消息？

我有以下HTML 5表单：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"/>

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

编辑：还请注意，类型密码字段的错误消息很简单*****..要重新创建它，给用户名一个值，然后点击Submit。

编辑：我用Chrome 10进行测试。请做同样的事

Answer 1

使用setCustomValidity:document.addEventListener("DOMContentLoaded",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;elements&nbsp;=&nbsp;document.getElementsByTagName("INPUT"); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;elements.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elements[i].oninvalid&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.setCustomValidity(""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!e.target.validity.valid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.setCustomValidity("This&nbsp;field&nbsp;cannot&nbsp;be&nbsp;left&nbsp;blank"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elements[i].oninput&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.setCustomValidity(""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;}})I&nbsp;改为香草JavaScript来自Mootools的@itastorn在注释中，但是如果需要的话，您应该能够计算出等效的Mootools。编辑我在这里更新了代码setCustomValidity与我最初回答时所理解的略有不同。如果setCustomValidity设置为空字符串以外的任何内容，它将导致该字段被视为无效；因此，您必须在测试有效性之前清除它，不能只设置它而忘记它。进一步编辑如下面@thomasvdb的注释中所指出的，在某些情况下，您需要清除invalid否则，可能会有一个额外的通行证通过oninvalid处理程序来清除它。

Answer 2

下面是处理自定义错误消息的代码HTML 5<input&nbsp;type="text"&nbsp;id="username"&nbsp;required&nbsp;placeholder="Enter&nbsp;Name" &nbsp;&nbsp;&nbsp;&nbsp;oninvalid="this.setCustomValidity('Enter&nbsp;User&nbsp;Name&nbsp;Here')" &nbsp;&nbsp;&nbsp;&nbsp;oninput="this.setCustomValidity('')"&nbsp;&nbsp;/>这个部分很重要，因为它隐藏了用户输入新数据时的错误消息：oninput="this.setCustomValidity('')"

Answer 3

的帮助下控制自定义消息非常简单HTML5事件oninvalid这是代码：<input&nbsp;id="UserID"&nbsp;&nbsp;type="text"&nbsp;required="required" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oninvalid="this.setCustomValidity('Witinnovation')" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onvalid="this.setCustomValidity('')">这是最重要的：onvalid="this.setCustomValidity('')"