Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 　正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。

フォームの入力値をリアルタイムにバリデーション「Realtime validation」。



prototype.js と、配布している validate.js を読み込んだあと次のようなコードを書くだけ。

Validator.register({
  "#mail" : {
    "/^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/": "OK",
    "/^$/": "必ず入力してください",
    "/.*/": "正しいメールアドレスを入力してください"
  }
});

↓ 上記コードで次のHTMLにバリデート機能を加えます

<input name="mail" id="mail"/><span id="mail_msg"></span>

こういったリアルタイムなバリデーション機能って凄く便利なのでライブラリ化されていると重宝しそうですね。

関連エントリ

• prototype.jsを用いたフォントサイズ変更スクリプト
• ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」
• JavaScriptを使ってページにマウスジェスチャ機能を実装する