javascript - HTML5 form required attribute. Set custom validation message? -

i've got 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 hit enter when they're both blank, popup box appears saying "please fill out field". how change default message "this field cannot left blank"?

edit: note type password field's error message *****. recreate give username value , hit submit.

edit: i'm using chrome 10 testing. please same

use setcustomvalidity:

document.addeventlistener("domcontentloaded", function() {     var elements = document.getelementsbytagname("input");     (var = 0; < elements.length; i++) {         elements[i].oninvalid = function(e) {             e.target.setcustomvalidity("");             if (!e.target.validity.valid) {                 e.target.setcustomvalidity("this field cannot left blank");             }         };         elements[i].oninput = function(e) {             e.target.setcustomvalidity("");         };     } }) 

i changed vanilla javascript mootools suggested @itpastorn in comments, should able work out mootools equivalent if necessary.

edit

i've updated code here setcustomvalidity works differently understood when answered. if setcustomvalidity set other empty string cause field considered invalid; therefore must clear before testing validity, can't set , forget.

further edit

as pointed out in @thomasvdb's comment below, need clear custom validity in event outside of invalid otherwise there may pass through oninvalid handler clear it.