1412568527 ホームページ メールフォームの仕様に関しての質問です。


※概要をイメージで添付しました。

バリデーション(jQuery)を使って、必須箇所項目に入力が無い場合は、確認画面に進む前に入力がない旨を伝え入力してもらう方法で作成しました。

ただし、ラジオボタン、チェックボタンで対応している項目にその他項目を設けておりますところのテキスト入力が行われているか、されていないかのチェックが出来ないのです。

その他項目にチェックが入った場合、かならずテキストで入力を行って欲しいのですが、通常Javascriptで設定できる必須チェックがバリデーションを使っている関係、使えないのです。何か他の方法でチェックできるようにする方法はないでしょうか。

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2014/10/06 17:24:31
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント500pt

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

id:mcs_m

ありがとうございます。
こちらのvalidationではなかったのですが、大変参考になりました。このvalidationは世界標準のようなのでこちらに変更して対応してみようかと考えております。

2014/10/06 17:24:18

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません