[メールフォームプロ] チェックボックス、ラジオボタンを必須項目にしたい
チェックしないとフォームの送信ができないよう制御したい
- メールフォームにチェックボックスを置くとき、「選択肢のどれかを必ず選んでもらいたい」というケースがあります
- 通常は、javascriptを使ってボックスのチェック有無を確認して～と手間がかかるところですが、シンクグラフィカさんで無料公開されているCGIメールフォームプロを使えば簡単に実現できます
- 併せて、ラジオボタンを必須項目にする方法についても紹介します
チェックボックスを必須項目にする
<dt><span class="must">必須</span>好きなザビ家は？</dt>
<dd>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" data-min="1" value="デギン">
<span>デギン</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ギレン">
<span>ギレン</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="キシリア">
<span>キシリア</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ドズル">
<span>ドズル</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ガルマ">
<span>ガルマ</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ミネバ">
<span>ミネバ</span>
</label>
<div id="errormsg_好きなザビ家は？" class="mfp_err"></div>
</dd>
- すべてのチェックボックスに「required="required"」を設定します
- 一つ目のチェックボックスにだけ「data-min="1"」を設定します
- エラー文を表示させたい場所にエラーメッセージ用のdiv要素を配置します。このとき、id名を「errormsg_チェックボックス名（nameと属性と同じもの）」とします
ラジオボタンを必須項目にする
<dt><span class="must">必須</span>今使っている偽名は？</dt>
<dd>
<ul>
<li><label>
<input type="radio" name="今使っている偽名は？" required="required" value="エドワウ・マス"> エドワウ・マス
</label></li>
<li><label>
<input type="radio" name="今使っている偽名は？" required="required" value="シャア・アズナブル"> シャア・アズナブル
</label></li>
<li><label>
<input type="radio" name="今使っている偽名は？" required="required" value="クワトロ・バジーナ"> クワトロ・バジーナ
</label></li>
</ul>
<div id="errormsg_今使っている偽名は？" class="mfp_err"></div>
</dd>
- ラジオボタンの場合は、すべてのボタンに「required="required"」を設定するだけでOKです
- エラーメッセージ用のdiv要素を忘れずに配置しましょう
余談
- 動作確認するときは、CGI本体（mailformpro.cgi）のパスが繋がっているか確認しましょう
- パスが間違っているとチェック機能が働かず、すべてのボックスにチェックを入れないと送信できないというおかしな状況になります（一敗）
- それにしても、これだけの機能がついたフォームを無料で使えるってすごいことです
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。