前の記事 ≪:楽天ウェブサービスをphpから簡単に使うライブラリ「Services_Rakuten」
次の記事 ≫:ブログ風の“タグ”でテキスト文書を仕分けできるメモ帳「TAGるメモ...

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

2007年01月19日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Realtime validation using Ajax
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>

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

関連エントリ

関連の記事検索:JavaScript, Ajax, フォーム, ライブラリ, validation, prototype.js
スポンサード リンク

By.KJ : 2007年01月19日 12:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)