質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2606閲覧

jQueryでアンケートのエラーに対する処理を実行させたい

shin12t

総合スコア25

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/19 05:52

編集2020/03/19 16:29

前提・実現したいこと

jQueryでアンケートページのエラー時の挙動を設定しています。

実現したいこととしてエラー時(未記入・未選択時)の挙動を設定したいと思っています。

  1. エラー時に各エラー対象箇所までスクロールする

※複数の場合は、エラー箇所の一番上に移動させる
例:Q2、Q4がエラーの場合 → Q2に移動する

  1. エラー時に各エラー文字を表示し、該当する箇所を記入・選択したらリアルタイムでエラー文を消す

発生している問題・エラーメッセージ

  1. の問題 エラー時にQ1にしかページ内遷移してくれない
  2. の問題 エラー文字を表示することはできても、リアルタイムで非表示にすることができない

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>任意</title> 7 <meta name="Description" content="" /> 8 <link href="stc_images/style.css" rel="stylesheet" /> 9</head> 10<body> 11 12<div class="wrapper"> 13 14 <div class="contents" id="contents"> 15 <form id="docform" method="post" action="index.php" name="check"> 16 <input type="hidden" id="mode" name="mode" value="confim" /> 17 <div class="box box-q1"> 18 <p class="step"><img src="stc_images/fv.jpg"></p> 19 <p class="box_main"><img src="stc_images/q1.jpg"></p> 20 <ul> 21 <li><label><input name="q1" type="radio" value="はい">はい</label></li> 22 <li><label><input name="q1" type="radio" value="いいえ">いいえ</label></li> 23 </ul> 24 </div> 25 26 <div class="box box-q2"> 27 <p class="box_main"><img src="stc_images/q2.jpg"></p> 28 <ul> 29 <li><label><input name="q2:0" type="checkbox" value="任意">任意</label></li> 30 <li><label><input name="q2:1" type="checkbox" value="任意">任意</label></li> 31 32 </ul> 33 </div> 34 35 <div class="box box-q3"> 36 <p class="box_main"><img src="stc_images/q3.jpg"></p> 37 <ul> 38 <li><label><input name="q3:0" type="checkbox" value="任意">任意</label></li> 39 <li><label><input name="q3:1" type="checkbox" value="任意">任意</label></li> 40 </ul> 41 <p class="box_main"><img src="stc_images/q3_column.jpg"></p> 42 </div> 43 44 <div class="box box-q4"> 45 <p class="box_main"><img src="stc_images/q4.jpg"></p> 46 <p class="box_main"><img src="stc_images/q4_img.jpg"></p> 47 <ul> 48 <li><label><input name="q4:0" type="checkbox" value="任意">任意</label></li> 49 <li><label><input name="q4:1" type="checkbox" value="任意">任意</label></li> 50 </ul> 51 </div> 52 53 <div class="box box-q5"> 54 <p class="box_main"><img src="stc_images/q5.jpg"></p> 55 <ul> 56 <li><label><input name="q5" type="radio" value="任意">任意</label></li> 57 <li><label><input name="q5" type="radio" value="任意">任意</label></li> 58 </ul> 59 </div> 60 61 <div class="box box-q6"><br><br> 62 <img src="stc_images/text.jpg" alt="" width="100%"/> 63 64 <p class="q1_error error">Q1が未選択です。</p> 65 <p class="q2_error error">Q2が未選択です。</p> 66 <p class="q3_error error">Q3が未選択です。</p> 67 <p class="q4_error error">Q4が未選択です。</p> 68 <p class="q5_error error">Q5が未選択です。</p> 69 70 <a href="任意" class="link_btn"> 71 <img src="stc_images/btn_on.jpg" alt="送信" style="margin:0 auto 5%" width="95%"/> 72 </a> 73 <br> 74 <img src="stc_images/img_08.jpg" alt="" width="100%"/> 75 </div> 76 </form> 77 </div> 78</div> 79 80<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script> 81<script src="stc_images/exvalidation.js"></script> 82<script src="stc_images/exchecker-ja.min.js"></script> 83<script src="stc_images/script.js"></script> 84 85</body> 86</html> 87 88

jQuery

1ソースコード 2 3//validate 4$(window).load(function(){ 5 $(".q1_error").hide(); 6 $(".q2_error").hide(); 7 $(".q3_error").hide(); 8 $(".q4_error").hide(); 9 $(".q5_error").hide(); 10 $(".q6_error").hide(); 11 $(".control.on").hide(); 12 13 $(".link_btn").click(function(){ 14 if($(".box-q1 input:checked").length > 0){ 15 $(".q1_error").hide(); 16 smath_scroll(); 17 } else { 18 $(".q1_error").show(); 19 return false; 20 } 21 }) 22 23 $(".link_btn").click(function(){ 24 if($(".box-q2 input:checked").length > 0){ 25 $(".q2_error").hide(); 26 smath_scroll(); 27 } else { 28 $(".q2_error").show(); 29 return false; 30 } 31 }) 32 33 $(".link_btn").click(function(){ 34 if($(".box-q3 input:checked").length > 0){ 35 $(".q3_error").hide(); 36 smath_scroll(); 37 } else { 38 $(".q3_error").show(); 39 return false; 40 } 41 }) 42 43 $(".link_btn").click(function(){ 44 if($(".box-q4 input:checked").length > 0){ 45 $(".q4_error").hide(); 46 smath_scroll(); 47 } else { 48 $(".q4_error").show(); 49 return false; 50 } 51 }) 52 53 $(".link_btn").click(function(){ 54 if($(".box-q5 input:checked").length > 0){ 55 $(".q5_error").hide(); 56 smath_scroll(); 57 } else { 58 $(".q5_error").show(); 59 return false; 60 } 61 }) 62}); 63 64 65function smath_scroll(){ 66 // スクロールの速度 67 var speed = 1500; // ミリ秒 68 // 移動先を数値で取得 69 var position = $('.box:first').offset().top; 70 // スムーススクロール 71 $('body,html').animate({scrollTop:position}, speed, 'swing'); 72 return false; 73} 74 75 76// validate 77$(function(){ 78 $('.link_btn').click(function(){ 79 $('.error').remove(); 80 $('.box').exValidation({ 81 firstValidate: true, 82 rules: {}, 83 customClearError: function() { 84 window.location.href = '任意の遷移場所'; 85 }, 86 stepValidation: true, 87 errInsertPos: 'after', 88 errPosition : 'fixed', 89 errTipCloseBtn: false, 90 }); 91 $('.box').submit(); 92 93 return false; 94 }); 95 96 //初期表示 97 chk_error(); 98 99 //変更イベント 100 $('input[name=q1]').change(function(){ 101 chk_error(); 102 }); 103 $('input[name=q2]').change(function(){ 104 chk_error(); 105 }); 106 $('input[name=q3]').change(function(){ 107 chk_error(); 108 }); 109 $('input[name=q4]').change(function(){ 110 chk_error(); 111 }); 112 $('input[name=q5]').change(function(){ 113 chk_error(); 114 }); 115 116 //エラーチェック 117 function chk_error() { 118 119 chk_q1 = $('input[name=q1]:checked').val(); //q1 120 chk_q2 = $('input[name=q2]:checked').val(); //q2 121 chk_q3 = $('input[name=q3]:checked').val(); //q3 122 chk_q4 = $('input[name=q4]:checked').val(); //q4 123 chk_q5 = $('input[name=q5]:checked').val(); //q5 124 } 125}); 126

試したこと

  • 以下の部分の修正・改善(var position)
function smath_scroll(){ // スクロールの速度 var speed = 1500; // ミリ秒 // 移動先を数値で取得 var position = $('.box:first').offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }

補足情報(FW/ツールのバージョンなど)

使用ソフト Atom、Google Chrome

【自力で解決できました】

jquery.validationEngine というアンケートやフォームなどで使える既存のものがあったのでそれを使用し、カスタマイズして使用しました。
委託の制作会社さんで制作したJSだったので独自すぎてカスタマイズが難しかったことから、全部やり直すことにしました。
解決方法は以下の通りです。

【自力で解決した方法】

以下のブログ記事を参考にさせていただき、<input>内の属性の中身を中心に記述しなおしました。
参考サイト①:http://www.webdesign-fan.com/

当初は、制作会社さんの制作したLPがCVボタンを<a>タグの中の<img>タグで設定していたため(HTMLコード参照)、そこも<input>タグに修正し、その画像はCSSの[background]で読み込むことにより解決しました。

エラーが起きている要素の左上にエラー文を配置する

また、他にもエラー文を表記させる際の位置をカスタマイズしました。
参考サイト②:https://studio-key.com/

HTML

1<!-- <head>内記入タグ変更前 --> 2<script> 3 $(function(){ 4 jQuery("#form_1").validationEngine(); 5 }); 6</script>

HTML

1<!-- <head>内記入タグ変更後*** --> 2<script> 3 $(function(){ 4 jQuery("#form_1").validationEngine('attach', { 5 promptPosition:"topLeft" 6 }); 7 }); 8</script>

上記の様に<head>内に読み込む際、「topLeft」とすることで、エラーが起きている要素の左上に配置させることができました。
参考サイト②で、他の位置に指定する方法もご覧いただけます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/03/19 12:57

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
shin12t

2020/03/19 15:16 編集

kei344 様 質問の追記・修正のご依頼をありがとうございます。 teratail自体、初心者だったもので勝手がわからず申し訳ありませんでした。 これからできる限り記入し、皆さんの御役立てになれるように努力してみます。 また、ステータスも解決済みに変更したいと思います。 ご依頼いただきありがとうございました!
guest

回答2

0

ベストアンサー

なんか色々と直したいのですが、まず、任意なのに入力しないとエラーが出る仕様になってる気がしますがいいんでしょうか?

http://isket.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/form%E3%81%A7checkbox%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E5%BF%85%E3%81%9A%E9%80%81%E3%82%8B%E6%96%B9%E6%B3%95/

この記事を参考にいつも私はアンケートページを作っています。
入力されていない場合に0が返ってくると便利なことが結構あります。
まず、全てのアンケートの入力値を掛け算してみましょう。0を含む掛け算は必ずゼロになりますから、掛け算の答えが0の場合、入力されていない項目があるとわかります。

あとは、値が0のものがどれかを特定してそこにスクロールするというのはいかがでしょう。

投稿2020/03/19 08:35

okina

総合スコア471

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin12t

2020/03/19 10:01 編集

iwasanaoki 様 改めてご回答ありがとうございます。 参考記事読ませていただきました。 先程のご回答のあと、for文の入力値の掛け算でつまづいていましたが iwasanaoki様のご回答のおかげもあり、解決できそうです。 今回は、クライアントからの依頼で早めにとのことでしたので、やむを得なくJS自体を取り替えることとなりました。 次回はそのようにチャレンジしてみたいと思います。 今回は誠にありがとうございました。
guest

0

linkButtonが押されたときの処理をForで回してみてはいかがでしょうか。
1がエラーならBreak、1がエラーじゃなければ2に進むの方がいいかと思います

投稿2020/03/19 08:04

okina

総合スコア471

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shin12t

2020/03/19 08:15

iwasanaoki 様 ご回答ありがとうございます。 for文について調べてみましたが、当方jQueryやJavascriptは初心者でして... 具体的にこのコード内でどう使用するかご教授いただけないでしょうか。 お手数ですがよろしくお願い申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問