javascript - HTML5表单必填属性。 设置自定义验证消息？(HTML5 form required attribute. Set custom validation message?)

Question

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/

(我有以下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"/> 

Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field".

(目前，当我将两个都空白时按Enter键时，会出现一个弹出框，提示“请填写此字段”。)

How would I change that default message to "This field cannot be left blank"?

(如何将默认消息更改为“此字段不能为空”？)

EDIT: Also note that the type password field's error message is simply ***** .

(编辑：还请注意，类型密码字段的错误消息只是***** 。)

To recreate this give the username a value and hit submit.

(要重新创建此名称，请为用户名指定一个值，然后单击“提交”。)

EDIT : I'm using Chrome 10 for testing.

(编辑 ：我正在使用Chrome 10进行测试。)

Please do the same

(请同样)

  ask by Skizit translate from so

Answer 1

Here is the code to handle Custom Error Message in HTML5

(这是处理HTML5中的自定义错误消息的代码)

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

This part is important because it hides the error message when the user inputs new data:

(这部分很重要，因为它在用户输入新数据时隐藏了错误消息：)

oninput="this.setCustomValidity('')"