お問合せホームで確認ボタンを押すとトップページにスクロール

問い合わせホームにて確認ボタンを押すと画面トップページにスクロールし確認画面にもどるように
Javaを組みました。しかし、入力ホームに間違いがあった場合、そこの項目にいきポップアップが出るpatternを組んでいるのですが
どうやらそれが反映されなくなってしまいました。
特に電話番号でハイフン入りのpatternを組んでおり、そこに間違いがあった場合でもそのままトップページにスクロールされてしまいます。やりたいのは間違いがあった場合は間違いがあった入力ホームの所にスクロールされ、ポップアップが出て間違いがなかったらトップページにスクロールという流れにしたいのですが、お手数ですがわかる方教えていただければと思います

javascript
1<head>
2<meta charset="UTF-8">
3<title>sample</title>
4<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
5
6<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
7
8<script src="https://sdk.form.run/js/v2/formrun.js"></script>
9
10<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all">
11
12</head>

html
1<body>
2<form class="formrun" action="https://form.run/api/v1/r/"○○○○○○" method="post" data-formrun-alert-dialog  data-formrun-confirm="true"> 
3<div class="container">
4<h1>formrun.js <small> - Confirm mode</small></h1>
5<div class="card">
6<h3 class="card-header" data-formrun-hide-if-confirm="">ﾌｫｰﾑを入力してください
7<p id="alert" style="display:none;"><font color="red"><strong><u>入力に不備があります。<br>電話番号をご確認ください</font></strong></u></p>
8</h3>
9<h1 class="card-header" data-formrun-show-if-confirm><font color="red"><strong><u>確認画面<br>内容を必ずご確認ください</font></strong></u></h1>
10<div class="card-block">
11<div class="form-group row" data-formrun-class-if-success="has-success" 　data-formrun-class-if-error="has-danger" data-formrun-target="氏名">
12
13<label class="form-control-label" for="name">氏名   <span class="haveto">必須</span></label>
14<div class="cp_iptxt" data-formrun-hide-if-confirm>
15<input type="text" placeholder="太朗" pattern="\S+" 　class="form-control" id="name" name="氏名" data-formrun-required="" data-formrun-class-if-success="form-control-success" 　data-formrun-class-if-error="form-control-danger"><i class="fa fa-child  faa-vertical animated fa-lg fa-fw" aria-hidden="true"></i>
16<div class="text-danger" data-formrun-show-if-error="氏名">正しく入力してください</div>
17</div>
18<div class="cp_iptxt" data-formrun-show-if-confirm>
19<span data-formrun-confirm-value="氏名"></span>
20</div>
21</div>
22
23<div class="form-group row" data-formrun-class-if-success="has-success" 　data-formrun-class-if-error="has-danger" data-formrun-target="電話番号">
24<label class="form-control-label" for="tel">電話番号   <span class="haveto">必須</span></label>
25<div class="cp_iptxt" data-formrun-hide-if-confirm>
26<input type="text" placeholder="03-3335-6644(ﾊｲﾌﾝ有)" pattern="0\d{1,4}-\d{1,4}-\d{1,4}" class="form-control" id="tel" name="電話番号" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"><i class="fa fa-phone faa-wrench animated fa-lg fa-fw" aria-hidden="true"></i>
27<div class="text-danger" data-formrun-show-if-error="電話番号">正しく入力してください</div>
28</div>
29<div class="cp_iptxt" data-formrun-show-if-confirm>
30<span data-formrun-confirm-value="電話番号"></span>
31</div>
32</div>
33
34<a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button="">戻る</a>
35<button id="formBtn" disabled type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">確認</button>
36</div>
37</form>
38</div>
39</div>  
40</div><!-- /.container -->
41</body>

javascript
1<body>
2<script>
3$(function(){
4  $("#formBtn").on("click", function(){
5    if (this.textContent == '確認'){ 
6      $("html, body").animate({scrollTop: 0 }, 1000, "swing");
7　　　　//もう一回ボタンの中身を確認
8　　　　if (this.textContent == '確認'){ 
9         //変化がない場合、入力に不備があるので、入力に不備がある旨を表示
10　　　　　$("#alert").css('display', 'block');
11       }
12    }
13  });
14});
15</script>
16</body>

Jon_do

2020/11/16 13:21

確認しようと思い、元々のコードを見てみましたが状況の再現が出来ているコードではなかったため確認できませんでした。 cssを質問に追記、htmlも修正することをオススメします。

行動規範の内容に同意します

回答1件

ベストアンサー

確認してませんが、多分これで行けます。
あとで確認します。

jquery
1<script>
2$(function(){
3  $("#formBtn").on("click", function(){
4const position = this.offset().top;
5    if (this.textContent == '確認'){ 
6      $("html, body").animate({scrollTop: position }, 1000, "swing");
7　　　　//もう一回ボタンの中身を確認
8　　　　if (this.textContent == '確認'){ 
9         //変化がない場合、入力に不備があるので、入力に不備がある旨を表示
10　　　　　$("#alert").css('display', 'block');
11       }
12    }
13  });
14});
15</script>