人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

1412568527
●拡大する

●質問者: エムシー
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●500ポイント ベストアンサー

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


エムシーさんのコメント
ありがとうございます。 こちらのvalidationではなかったのですが、大変参考になりました。このvalidationは世界標準のようなのでこちらに変更して対応してみようかと考えております。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ