JavaScriptでユーザーに親切なフォーム入力

Ajaxによるフォーム入力作業のサポート｜Web Designing 5月号

フォーム入力に関するJavaScriptはいろいろありますが、Web Designing５月号「Ajaxハジメマシタ」に載っていたスクリプトもなかなか便利そうなので紹介してみます。

サンプルでは３つのライブラリが盛り込まれ、ユーザーに親切なフォーム入力が作れます。どんな機能があるかというと…、
１）空欄と入力データ形式をチェック（JSVallidareライブラリ）
２）郵便番号から住所を自動入力（AjaxZip2.0ライブラリ）
３）日付の入力時にカレンダーを表示（protocalenderライブラリ）
…以上の３つです。

早速、サンプルはこちらです。

↑このサンプルはこちらからダウンロードできます。

設定は難しくありません。本を買っていただくのが一番早いですが、簡単に説明すると…

１）JSVallidareライブラリ
必須項目やデータ形式の条件を設定すれば、入力状態をチェックして不適切な場合にエラーメッセージを表示させます。
まず、prototype.jsとjsvalidate.jsを読み込みます。（必ずprototype.jsを先に読み込んで下さい）
次にinputタグにclass属性を使ってチェック条件を指定します。チェック条件は以下の通りです。
jsrequired：必須項目
jsvalidate_number：半角数字（負数含む）
jsvalidate_digits：半角数字
jsvalidate_alpha：半角英字
jsvalidate_alphanum：半角英数字とアンダースコア
jsvalidate_email：メールアドレス形式
また、不適切な入力があった際に表示するエラーメッセージは、各inputタグのalt属性に記述します。

２）AjaxZip2.0ライブラリ
前にこのブログでも「住所自動入力フォーム」として紹介しましたが、郵便番号から住所を自動入力してくれるスクリプトです。CGIが不要なので、どんなサイトにも導入するコトができます。
まず、ajaxzip2.jsを読み込み（この時、charset属性も指定してください）、サンプルhtmlの18行目あたり、
AjaxZip2.JSONDATA = "js/data";
で、郵便番号データファイルを置いたパスを設定します。
フォームの中身は55行目〜61行目付近です。詳しくは、Kawa.netさんの「AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）」という記事に詳しく書かれていますので参考ししてみて下さい。

３）protocalenderライブラリ
任意の日付を入力する場合、何曜日か分からずにカレンダーを探すというコトがあったりしますが、そんな手間を省くのに使えるスクリプトです。
まず、prototype.js、effects.js、protocalendar.js、lang_ja.jsを読み込みます。
次に、サンプルhtmlの19〜25行目あたりのように、カレンダーオプションを設定します。
format : "yyyy／mm／dd",　が表示フォーマットです。
startYear : 2008,　と　endYear : 2010　がカレンダーで選択できる年の範囲を指定しています。
フォームの中身は69行目〜79行目付近です。詳しい設定はSpookies LabsさんのProtoCalendarページを読んでみてください。