[解決済み] HTML5フォームの必須属性。カスタムバリデーションメッセージを設定しますか？

質問

以下のような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"/>

現在、両方とも空白の状態でEnterキーを押すと、"Please fill out this field"というポップアップボックスが表示されるようになっています。このデフォルトメッセージを "このフィールドは空白にできません" に変更するにはどうしたらよいでしょうか？

EDITです。 また、タイプパスワードフィールドのエラーメッセージは、単に ***** . これを再現するには、ユーザー名に値を与えて、送信を押してください。

EDIT : テストにはChrome 10を使用しています。同じようにしてください。

解決方法は？

使用方法 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("");
        };
    }
})

I バニラJavaScriptに変更 が提案するように、Mootoolsから パステルカラー のコメントにあるように、必要であればMootoolsと同等のものを作成することができるはずです。

編集

ここのコードを次のように更新しました。 setCustomValidity は、私が最初に回答したときに理解していたのとは若干異なる動作をします。 もし setCustomValidity を空文字列以外に設定すると、そのフィールドは無効とみなされます。したがって、有効性をテストする前にそれをクリアする必要があります。

その他の編集

以下の @thomasvdb さんのコメントで指摘されているように、カスタムの有効性をクリアするには invalid を通過させる必要があります。 oninvalid ハンドラでクリアします。