HTML5 form required attribute. Set custom validation message?

Question

I've got the following HTML5 form: 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". 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. Please do the same

Answer 1

Here is the code to handle custom error message in 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('')"