Q&A
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
前提・実現したいこと
jQueryでアンケートページのエラー時の挙動を設定しています。
実現したいこととしてエラー時（未記入・未選択時）の挙動を設定したいと思っています。
- エラー時に各エラー対象箇所までスクロールする
※複数の場合は、エラー箇所の一番上に移動させる
例：Q2、Q4がエラーの場合 → Q2に移動する
- エラー時に各エラー文字を表示し、該当する箇所を記入・選択したらリアルタイムでエラー文を消す
発生している問題・エラーメッセージ
- の問題 エラー時にQ1にしかページ内遷移してくれない
- の問題 エラー文字を表示することはできても、リアルタイムで非表示にすることができない
該当のソースコード
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」とすることで、エラーが起きている要素の左上に配置させることができました。
参考サイト②で、他の位置に指定する方法もご覧いただけます。
kei344 様
質問の追記・修正のご依頼をありがとうございます。
teratail自体、初心者だったもので勝手がわからず申し訳ありませんでした。
これからできる限り記入し、皆さんの御役立てになれるように努力してみます。
また、ステータスも解決済みに変更したいと思います。
ご依頼いただきありがとうございました！
回答2件
0
ベストアンサー
なんか色々と直したいのですが、まず、任意なのに入力しないとエラーが出る仕様になってる気がしますがいいんでしょうか？
この記事を参考にいつも私はアンケートページを作っています。
入力されていない場合に0が返ってくると便利なことが結構あります。
まず、全てのアンケートの入力値を掛け算してみましょう。0を含む掛け算は必ずゼロになりますから、掛け算の答えが0の場合、入力されていない項目があるとわかります。
あとは、値が0のものがどれかを特定してそこにスクロールするというのはいかがでしょう。
投稿2020/03/19 08:35
総合スコア471
iwasanaoki 様
改めてご回答ありがとうございます。
参考記事読ませていただきました。
先程のご回答のあと、for文の入力値の掛け算でつまづいていましたが
iwasanaoki様のご回答のおかげもあり、解決できそうです。
今回は、クライアントからの依頼で早めにとのことでしたので、やむを得なくJS自体を取り替えることとなりました。
次回はそのようにチャレンジしてみたいと思います。
今回は誠にありがとうございました。
あなたの回答
tips
プレビュー
