Contact Form 7を使い倒す② 「どちらか」必須にしたい時
前回に引き続き、所属するスキー学校の予約フォーム案件の話。
レッスン予約
こちらのインターネット予約は、 極楽坂エリア専用 となりますのでご注意ください。らいちょうバレーエリア・あわすのエリアについては、お電話にてご予約ください。 (1)予約内容の変更・キャンセルについては 前日までに お電話または予約確認メールに返信いただきその旨をお伝えください。なお 当日のキャンセルについてはお電話のみ で承ります。 (2)当日は各講習 開始時間の20分前までに …
年齢または学年といった風に、どちらかの要素の選択をしてもらわないといけないことが発生した場合の対応方法。実際には「学年（年齢）」によって、受講できる内容が異なるために、3つの年齢層に応じて分岐を設定。「～小学2年生」、「小学3年生～小学6年生」、「中学生以上（大人）」の3つの年齢層を設定してます。
1)冒頭に年齢選択
|
1 |
[radio sel id:sel use_label_element default:1 "幼児～小学2年生" "小学3年生～小学6年生" "中学生以上（大人）"] |
また、この選択肢をチェック後に表示される部分は「<div id=”after_sel”>～</div>」で囲んであり、radioでいずれか一つが選ばれていないと次に進まないようになっています。また、Contact Form 7の仕様上、radioはいずれか一つが最初に選択されてしまいますので、下記のjQueryのコードで、radioの選択をクリアにしています。
2)Contact Form 7のコード
|
1 2 |
<label> <span class="age">年齢</span><span class="grade-1">学年</span><span class="grade-2">学年</span>（必須）</label> [select grade-1 id:grade-1 first_as_label "ご選択ください" "幼児（～4歳）" "幼児（5歳児）" "幼児（6歳児）" "小学1年生" "小学2年生"][select grade-2 id:grade-2 first_as_label "ご選択ください" "小学3年生" "小学4年生" "小学5年生" "小学6年生"][text age id:age maxlength:4][checkbox* age-flag id:age-flag exclusive "grade-1" "grade-2" "age"] |
詳細は完成形に。冒頭にラジオボックスで「学年（年齢）」の層を選択させて、そのうえで、<div>～</div>で囲んだフォームを表示させるようにjQueryで仕込んであります。
また、中学生以上は「年齢（必須）」、それ以下は「学年」と表示されるように<span>～</span>要素内に記載して、切り替える方向。
キモは最終行。他のselect要素やテキストボックスは「必須」とせず、最後にチェックボックスを必須として設定。年齢の入力状況や学年の選択状況に応じて、jQuery側でチェックボックスを制御しておけば、いずれか1つの選択を必須とできるようになる。
3)jQueryのコード
適当にjsファイルを作るなどして、ロードしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
$(function() { //読み込み時に受講者選択のチェックを外す $('input[name="sel"]:radio').prop('checked', false); //受講者選択をしない時には入力不可のため隠す $('#after_sel').hide(); //age-flagを隠す $('#age-flag').css('visibility','hidden'); //リロード時にチェックをクリアにする $('input[name="age-flag"]').eq(0).prop('checked', false); $('input[name="age-flag"]').eq(1).prop('checked', false); $('input[name="age-flag"]').eq(2).prop('checked', false); //radio #selを選択したり、変更した場合に実行 $('input[name="sel"]:radio').change(function(){ $('#after_sel').show(); //選択肢を変更した場合にもチェックをクリアにする $('input[name="age-flag"]').eq(0).prop('checked', false); $('input[name="age-flag"]').eq(1).prop('checked', false); $('input[name="age-flag"]').eq(2).prop('checked', false); //選択肢を変更した場合には値をクリアにする $('#grade-1').val(""); $('#grade-2').val(""); $('#age').val(""); //選択肢に応じて、選択肢の名称を「年齢」「学年」を切り替える var sel_val = $(this).val(); if (sel_val == "幼児～小学2年生") { $('#grade-1').show(); $('#grade-2').hide(); $('#age').hide(); $('.grade-1').show(); $('.grade-2').hide(); $('.age').hide(); }; if (sel_val == "小学3年生～小学6年生") { $('#grade-1').hide(); $('#grade-2').show(); $('#age').hide(); $('.grade-1').hide(); $('.grade-2').show(); $('.age').hide(); }; if (sel_val == "中学生以上（大人）") { $('#grade-1').hide(); $('#grade-2').hide(); $('#age').show(); $('.grade-1').hide(); $('.grade-2').hide(); $('.age').show(); }; }); //一番下の階層が変更されたら、チェックを入れる $('#grade-1').change(function(){ var grade = $(this).val(); if (grade == "幼児（～4歳）"||grade == "幼児（5歳児）"||grade == "幼児（6歳児）"||grade == "小学1年生"||grade == "小学2年生") { $('input[name="age-flag"]').eq(0).prop('checked', true); } else { $('input[name="age-flag"]').eq(0).prop('checked', false); }; }); //一番下の階層が変更されたら、チェックを入れる $('#grade-2').change(function(){ var grade = $(this).val(); if (grade == "小学3年生"||grade == "小学4年生"||grade == "小学5年生"||grade == "小学6年生") { $('input[name="age-flag"]').eq(1).prop('checked', true); } else { $('input[name="age-flag"]').eq(1).prop('checked', false); }; }); //年齢に何かしら入力されたら、チェック $('#age').change(function(){ var grade = $(this).val(); if (grade == "") { $('input[name="age-flag"]').eq(2).prop('checked', false); } else { $('input[name="age-flag"]').eq(2).prop('checked', true); }; }); }); |
ageに半角スペースや記号が入力されてても通るので、正規表現チェックなど改良が必要ですが・・・
今回は冒頭の選択肢に応じて、表示させるものを変更して対応しましたが、学年の選択肢と年齢のテキストボックスを設置して、どちらか一方に入力されていればOKといった判定にも利用することができます。またこのチェックボックスは隠すのがコツです。また、場所は選択肢の下に設置しておくと、送信時に入力が抜けていればエラーメッセージだけを表示させることができます。
非常に便利なContact Form 7ですが、ちょっと突っ込んだことをしたいときにはひと手間を加える必要がありますが、こうしたフォームを一から作るとバリデーションが大変だったりするので、楽するところは楽させていただきます。また、jQueryのコードは勢いで作ってるので、無駄がたくさん（笑）
Share Your Thoughts