アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2008年11月22日

jQueryのプラグイン「jquery.validate.js」を使って、フォームチェックする。さらに一部の項目の表示・非表示も。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

お客さん仕事でイベント申し込みのフォームをカスタマイズ。

あるお客さんのサイトで、イベント申し込み用のフォームを使っていたんだけれど、お客さんのお客さん(つまりエンドユーザー)から、

「以前に申し込んだことがあるのに、毎回毎回住所とか入れなきゃいけないのがめんどくちゃい!」

という改善要望がきたらしい。

もともとは

「参加イベント」
「お名前」
「住所」
「電話番号」
「メールアドレス」

といった、フォームの必須項目をCGIの設定ファイルで制御していたんだけど、これだと毎回住所とか入れないと申し込みができない。
確かに、いままで何度もイベントに参加しているような熱心なユーザーは不便だったりする。

かといって、お客さん側のCGIはセキュリティの関係でいじれないので、「既存顧客」か「初めて」を選んでもらって、クライアント側(JavaScript)でフォームの入力項目チェック(バリデーション)をすることに。

さらに、どうせだったら一部の入力項目自体の表示・非表示もできればさらに親切なのでは?
(例えば、新規のユーザーは必須項目を全て表示、既存顧客は必要最低限の「イベント」と「名前」と「電話番号」を必須項目として表示して、他の項目は非表示…みたいに。)
ということで、jQueryのプラグインを使って実装することにしました。
(まぁ、もともとプログラマーじゃないので、ソース的にはあまり美しくないけれど。)

JSカスタマイズの備忘録。

まず、フォームの入力項目をチェックするために、「jquery.js」本体と「jquery.validate.js」をダウンロード。

「jquery.validate.js」は、必須項目にクラス「required」を設定しておくと、未入力状態のときは「未入力だよー」というメッセージがクラス「error」のラベルに表示される仕組み。

ちなみに、表示されるメッセージはデフォルトでは英語なので、日本語化のプラグイン「messages_ja.js」を使って日本語に。

あとは、チェックしたいフォームにid(今回は「form1」)を設定しておいて、html側に

<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>

と記述して完了。

これ…めちゃくちゃラクチン!昔はアラート出したりして対応していたけど、唐突にアラートが出たり、ページ遷移したりしないのでスマートな感じがします。

んで、普通に使う場合はそれだけでいいんだけど、既存か新規のユーザーかで、一部の項目を表示・非表示したいという要望だったので、jQueryの構文

$(対象オブジェクト).show();
$(対象オブジェクト).hide();

を使って、対象オブジェクトの表示・非表示を制御。

具体的には、新たに作ったshowhide.jsで、関数showhide(disp);を定義して、必須項目の部分は、デフォルトの状態(初めてアクセスしたとき)は表示されていて、そこに設定しているクラス「newentry」の表示・非表示を切り替えています。
(dispの値がhideだったら非表示に、それ以外(showまたはnull)だったら表示って感じです。)
今回はフォーム・レイアウト用のテーブルの「tr」にnewentryを指定しているので、「行]をまるっと表示・非表示にしてます。(テーブルを使っていて、htmlが古くさいのはかんべん。)

targetClass=".newentry";//対象となるクラスを変数targetClassに代入

function showHide(disp){
if(disp=="hide") {
$(targetClass).hide();
} else {
$(targetClass).show();
}
}

単純に項目を表示・非表示するだけだったらこれでOKなんだけど、仮に非表示になった場合でも、jQuery.validate.jsの「required」は生きたままで、これだと項目が表示されていないのに必須状態なので送信できないという事態が。(汗)

そこで、jQueryの「addClass」と「removeClass」でクラス「required」を加えたり削除したりして対応。
※ひとつずつ指定するのは煩雑になるので配列「requiredId」を作って、for文で回す。

targetClass=".newentry";//対象となるクラスを変数targetClassに代入

requiredId=new Array();//対象となるidを格納する配列requiredIdを生成
requiredId[0]="#lastname_f";
requiredId[1]="#firstname_f";
requiredId[2]="#zip";
requiredId[3]="#state";
requiredId[4]="#address1";
requiredId[5]="#address2";
requiredId[6]="#address3";
requiredId[7]="#mail";

rqIdMaxNum = requiredId.length;//配列の最大値

function showHide(disp){
if(disp=="hide") {
$(targetClass).hide();
for (i=0; i<=rqIdMaxNum; i++) {
$(requiredId[i]).removeClass("required");
}
} else {
$(targetClass).show();
for (i=0; i<=rqIdMaxNum; i++) {
$(requiredId[i]).addClass("required");
}
}
$.cookie('disp',disp,{expires:365,path:'/'});
}

あとは、毎回「既存顧客」「初めて」を選んでもらうのも申し訳ないので、以前使ったjquery.cookie.jsで、選択した状態を1年間(長!)クッキーに保存するように。
(「$.cookie('disp',disp,{expires:365,path:'/'});」の部分)

※たぶんスクリプトとかjQueryがガッツリわかる人は、もっと汎用的に作れるはず。(汗)

…と、長々と書いたってイマイチ良く分からない(説明がヘタ?)と思うので、サンプルをアップしました。
(ちなみに、サンプルではなにも送信されずに、ただurlにジャンプします。※サンプルにある「講座」は存在しないのであしからず。w)

とりあえず必須項目をブランクのままで送信ボタンを押したり、ページ上部にある「ご利用者の方」「初めての方」を押して確認してください。一度選択すると、次にアクセスしたときはcookieが効いているので表示・非表示の状態が継承されているはずです。

※言っとくけど、htmlはお客さんの昔のデータの流用なので美しくないし(フォームは部分はテーブル)、スクリプトは苦手なので、とりあえず動きゃいいっていうテイで。

独り言。

実は、「jquery.validate.js」には、ある項目にチェックが入っていると(今回であれば「既存」「新規」の選択)動的に表示・非表示をさせたり、チェックできたり出来なかったり(つまり必須・任意)を切り替えることもできる…みたい。

でも、サンプルが英語(汗)&設定が難しい(ボクには)ので、こんな感じにしちゃいました。

関連サイト

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2008年11月22日 14:31 | ID:785

ページトップ△

ページトップ△