※概要をイメージで添付しました。
バリデーション(jQuery)を使って、必須箇所項目に入力が無い場合は、確認画面に進む前に入力がない旨を伝え入力してもらう方法で作成しました。
ただし、ラジオボタン、チェックボタンで対応している項目にその他項目を設けておりますところのテキスト入力が行われているか、されていないかのチェックが出来ないのです。
その他項目にチェックが入った場合、かならずテキストで入力を行って欲しいのですが、通常Javascriptで設定できる必須チェックがバリデーションを使っている関係、使えないのです。何か他の方法でチェックできるようにする方法はないでしょうか。
jQuery で validation をするプラグインって、何種類かあるのですが、以下のやつということで良いでしょうか。
http://jqueryvalidation.org/
「チェックボックスに、チェックを入れられたときだけ、値が入力されているかどうか」を validate するには depends を使います。
フォームがこんな感じだとして、
<form id="form" method="post"> <input type="checkbox" name="newspaper" value="1">新聞・雑誌広告 (媒体名 <input type="text" name="source_news" size="40"> ) <br> <input type="checkbox" name="etc" value="1">その他 <input type="text" name="source_etc" size="40"> <br> <input type="submit" value="送信"> </form>
こういう感じで、ルールを設定します。
$(function() { $("#form").validate({ rules: { source_news: { required: { depends: '[name="newspaper"][value="1"]:checked' } }, source_etc: { required: { depends: '[name="etc"][value="1"]:checked' } } }, messages: { source_news: { required: '新聞・雑誌の媒体名を入力してください' }, source_etc: { required: 'その他の内容を入力してください' } } }); });
jsFiddle で、動かしてみたのがこちらです。
http://jsfiddle.net/m11nm6jk/
本家のサイトのドキュメントでは、以下の箇所なんかが該当するのだと思いますが、どうにも分かりにくい。
http://jqueryvalidation.org/validate#rules
ある程度、javascript が読める人だったら、こちらのページが有用だと思います。
http://www.htmlhifive.com/conts/web/view/library/jquery-validate
ありがとうございます。
2014/10/06 17:24:18こちらのvalidationではなかったのですが、大変参考になりました。このvalidationは世界標準のようなのでこちらに変更して対応してみようかと考えております。