« Movable Type の再構築時にエラーになる… | トップページ | XMLデータをWebページに表示する »

2008.05.05

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

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

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

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

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

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

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

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

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

3)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ページを読んでみてください。

|

« Movable Type の再構築時にエラーになる… | トップページ | XMLデータをWebページに表示する »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41098589

この記事へのトラックバック一覧です: JavaScriptでユーザーに親切なフォーム入力:

» 住所自動入力フォーム [Good Sleep]
Ajaxな住所入力フォーム|AjaxZip2 ブラウザが賢くなっているので、フォームの入力時に途中まで入力すれば、いくつか候補が出てその中から選択するだけでOK、現状でもそんなに不便さは感じない各種入... [続きを読む]

受信: 2008.05.05 17:31

» 入力した値をチェックするJavaScript [Good Sleep]
リアルタイムに入力した値をチェック|Live Validation 以前に「JavaScriptでユーザーに親切なフォーム入力」というタイトルで、フォーム入力時に空欄や形式のチェックを行うスクリプトを [続きを読む]

受信: 2008.05.14 17:02

« Movable Type の再構築時にエラーになる… | トップページ | XMLデータをWebページに表示する »