masuidrive on rails

Realtime validation using Ajax

Posted by masuidrive Wed, 04 Jan 2006 21:45:00 GMT

　Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation

　正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。

　これで、あなたのサイトも一気にWeb2.0！ なのに使い方は超簡単。

　prototype.js とvalidate.js を自分のHTMLに読み込んで、下記の様に正規表現で表示するメッセージを指定するだけ。

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

　HTML側は下記の様にします。

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

　これだけで、動的にチェックして、メッセージを表示してくれます。
このライブラリを使えば、メッセージ表示だけではなく、郵便番号による住所補完や、アカウントの重複チェックなどを動的に行う事ができます。

　これらの方法については、近々解説予定。