入力フォームのエラーメッセージの表示のしかたを変更したいです。

入力フォームに入力した文字にエラーメッセージを発するコード書いたのですが、いざ自分で使ってみると、付属画像１のように（**赤い丸で囲ってある部分）**一番上の方にエラーメッセージが表示されるため、しかも、ページのお問い合わせフォームはページのずっと下の方に配置しており、上に8000pxほどのデザイン画像などがあります。

入力フォームに文字を入力して送信ボタンを押し、エラーメッセージがあると、一気に上の方までページが移動して、不便というか不自然な感じがします。特にスマホだとなおさらです。

これを付属画像２のようにしたいのですが、これはjavaでしょうか？javaScriptほとんど
使ったことないので困惑しています。

どうにかならないでしょうか？

付属画像１

付属画像２

php
1<?php
2session_start();
3
4$errors = array();
5
6if(isset($_POST['submit'])) { 
7
8
9$plan2 = $_POST['plan2'];
10
11$name = $_POST['name'];
12$furigana = $_POST['furigana'];
13
14
15$question = $_POST['question'];
16
17
18
19
20
21
22
23
24if($plan2 === "") { $errors['plan2'] =" 業種の選択するを選択して下さい。 ";
25}
26
27
28
29if($name === "") { $errors['name'] ="名前が入力されていません。 ";
30}
31
32if($furigana === "") { $errors['furigana'] ="フリガナが入力されていません。 ";
33}
34
35
36
37if($question === "") { $errors['question'] ="お問い合わせ内容入力（150文字以内）が入力されていません。 ";
38}
39
40
41
42
43
44if(count($errors) === 0) {
45
46    $_SESSION['plan2'] = $plan2; 
47
48    $_SESSION['name'] = $name; 
49    $_SESSION['furigana'] = $furigana;
50  
51   
52    $_SESSION['question'] = $question;
53
54
55    /* 確認画面の表示， */
56    header('Location:http://▼▼');
57    exit();
58     }
59  }
60  
61
62  if(isset($_GET['action']) && $_GET['action'] === 'edit'){
63
64
65   
66    
67   
68
69    $plan2 = $_SESSION['plan2'];
70
71
72    $name = $_SESSION['name'];
73    $furigana = $_SESSION['furigana'];
74  
75    
76    $question = $_SESSION['question'];
77  }
78     
79    ?>
80
81  
82<!DOCTYPE html>
83
84<html lang="ja">
85
86<head>
87    <meta content="text/html; charset=utf-8" />
88    <meta name="viewport" content="width=device-width, initial-scale=1">
89    <title>企業ホームページ　お問い合わせ画面</title>
90    <link rel="stylesheet" href="companyhp6form1.css">
91    <link rel="stylesheet" href="reset.css">
92    <link rel="stylesheet" href="companyhp6form1responsive.css">
93    <script src="jquery-3.6.0.min.js"></script>
94    <style type="text/css">
95
96    /* レスポンシブ対応で右に出る謎の余白を無くす */
97        .wrapper {
98     overflow: hidden;
99 }
100
101      /* 入力フォームの位置 */
102
103      .auto-style1 {
104
105text-align: center;
106
107}
108
109
110/* セレクトボックスの位置 */
111.auto-style2 {
112
113text-align: center;
114/* セレクトボックス中央に配置 */
115margin-top: 30px;
116}
117
118
119
120
121
122
123
124
125</style>
126
127
128<?php echo "<ul>";foreach($errors as $value) {
129
130echo "<li>"; 
131echo $value; 
132echo "</li>"; 
133} 
134
135echo "</ul>";
136
137?>
138
139
140
141</head>
142
143<body>
144<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
145<div class="wrapper">
146
147  
148
149
150    <form action="companyhp6form1.php" method="post" id="form">
151
152      
153
154        <div class="auto-style2">
155
156            <p class="tel-titile15">
157                業種を選択する：※
158            </p>
159
160
161
162            <span class="selectbox">
163                <select id="plan2" class="plan2" name="plan2">
164                    <option value="">業種の選択</option>
165                    <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様
166                    </option>
167                    <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?>
168                        >個人のお客様</option>
169                    
170                   
171                </select>
172            </span>
173        </div>
174
175<!--フォーム中央寄せのため１つ１つdivで囲むauto-style1-->
176
177            
178    
179        <div class="auto-style1">
180
181            <p class="tel-titile">
182                名前：※
183            </p>
184            <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
185        </div>
186        <div class="auto-style1">
187
188            <p class="tel-titile">
189                フリガナ：※
190            </p>
191            <input type="text" class="furigana" name="furigana" id="furigana"
192                value="<?php if(isset($furigana)){ echo $furigana; } ?>" />
193
194        </div>
195
196
197            
198        <div class="auto-style1">
199            <p class="tel-titile">
200                お問い合わせ内容入力（150文字）：
201            </p>
202               <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea>
203                   
204                </div>
205            
206
207        <div class="auto-style1">
208
209            <button type="submit" id="submit" name="submit" class="auto-style4">
210               送信</button>
211        </div>
212       
213    </form>
214
215    <footer>
216        <small>footer</small>
217    </footer>
218
219
220</div>
221</body>
222 <script src="main.js"></script>
223 
224 <script>
225  const form = document.querySelector('#form'); 
226 const name = document.querySelector('#name');
227  const question = document.querySelector('#question'); 
228  form.addEventListener('submit', function(event) { 
229      let msg = ""; 
230      if (name.value == "") msg += "<li>名前を入力してください</li>";
231        if (question.value == "") msg += "<li>お問い合わせ内容を入力してください</li>";
232
233if (msg == "") return; event.preventDefault(); alert(msg); 
234
235});
236</script>
237
238 <script src="jquery-3.6.0.min.js"></script>
239
240</html>

main.js

js
1//文字制限のコード　入力フォームのテキストエリア　タグは＜textarea＞
2//効果　１５０文字を超えると上部から四角い枠内にエラーメッセージが出て、送信ボタンが押せなくなります。
3
4let textarea = document.getElementById('question');//テキストエリアのID　question
5textarea.addEventListener('input', (e) => { //inputはマウスのコピーペーストもカウントされる
6  const submit = document.getElementById('submit');//送信ボタンのIDの　ここではsubmit　２箇所記入
7  if (textarea.value.length > 150) {
8    alert("150文字以内で記述してください。");
9    submit.disabled = true;//送信ボタンのIDの　ここではsubmit　１箇所記入
10  }else {
11    submit.disabled = false;//送信ボタンのIDの　ここではsubmit　１箇所記入
12  };
13});

css
1
2 /* 入力フォームクリック時にフォームの色が変化するのを防ぐ。なぜかPCのみ効かない */
3input:focus, textarea:focus, select:focus{ outline: none; }
4
5
6
7
8
9
10
11
12
13
14
15/* 送信ボタンの大きさ、スタイル */
16.auto-style4 {
17
18  margin-top: 74px;
19/* 画像の上の余白 */
20height: 62%; /*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
21え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
22width: 81%;/*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
23え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
24padding: 0;
25
26}
27
28/* 加入プラン選択のセレクトボックスのデザイン1 */
29#plan{
30vertical-align: middle;/* 隣り合う２つのタイプの違うボックスを平行に並べるための設定 */
31box-sizing: border-box;/* 隣り合う２つのタイプの違うボックスを平行に並べるための設定 */
32border: 2px solid #4e4e4e;  /* 枠線 */
33background-color: snow;  /* 背景色 */
34width: 27.1em;             /* 横幅 */
35height: 53px;           /* 高さ */
36font-size: 1.0em;          /* テキスト内の表示文字サイズ */
37color: #000000;
38line-height: 1.2;  /* 行の高さ */
39
40}
41
42
43
44
45
46
47#plan2{
48  vertical-align: middle;/* 隣り合う２つのタイプの違うボックスを平行に並べるための設定 */
49  box-sizing: border-box;/* 隣り合う２つのタイプの違うボックスを平行に並べるための設定 */
50  border: 2px solid #4e4e4e;  /* 枠線 */
51  background-color: snow;  /* 背景色 */
52  width: 27.1em;             /* 横幅 */
53  height: 53px;           /* 高さ */
54  font-size: 1.0em;          /* テキスト内の表示文字サイズ */
55  color: #000000;
56  line-height: 1.2;  /* 行の高さ */
57  margin-bottom: 20px;/* フォームの縦位置調節のため */
58  }
59  
60
61
62/* 入力フォームのスタイル */   
63
64
65#name {
66  
67  border: 2px solid #4e4e4e;  /* 枠線 */
68  padding: 0.5em;          /* 内側の余白量 */
69  background-color: snow;  /* 背景色 */
70  width: 25.5em;             /* 横幅 */
71  height: 30px;           /* 高さ */
72  font-size: 1em;          /* テキスト内の表示文字サイズ */
73  line-height: 1.2;         /* 行の高さ */
74
75}
76
77#furigana {
78  
79  border: 2px solid #4e4e4e;  /* 枠線 */
80  padding: 0.5em;          /* 内側の余白量 */
81  background-color: snow;  /* 背景色 */
82  width: 25.5em;             /* 横幅 */
83  height: 30px;           /* 高さ */
84  font-size: 1em;          /* テキスト内の表示文字サイズ */
85  line-height: 1.2;        /* 行の高さ */
86  
87}
88
89
90#question {
91  
92  border: 2px solid #4e4e4e;  /* 枠線 */
93  padding: 0.5em;          /* 内側の余白量 */
94  background-color: snow;  /* 背景色 */
95  width: 31.6em;             /* 横幅 */
96  height: 170px;           /* 高さ */
97  font-size: 1em;          /* テキスト内の表示文字サイズ */
98  line-height: 1.2;         /* 行の高さ */
99margin-top: 25px; /* フォームの縦位置調節のため */
100}
101
102
103
104/* 入力フォームとフォーム間の上下の余白， */
105
106
107
108input.question{margin:21px 0px;}
109input.name{margin:21px 0px;}
110input.furigana{margin:21px 0px;}
111
112
113
114
115
116
117/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
118.tel-titile{
119  line-height: 0px;/* 文字の行間 */
120  font-size: 22px;/* 文字の大さ */
121  font-weight: 900;/* 文字の太さ */
122  text-align: center;/* 文字を中央に配置 */
123  color: #4e4e4e;
124}
125
126.tel-titile14{
127
128  line-height: 0px;/* 文字の行間 */
129  font-size: 22px;/* 文字の大さ */
130  font-weight: 900;/* 文字の太さ */
131  text-align: center;/* 文字を中央に配置 */
132  color: #4e4e4e;
133  vertical-align: 17px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
134  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
135  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
136text-align: center;/* ブロック要素のみしか本来適応できない */
137}
138
139
140
141
142.tel-titile15{
143
144  line-height: 0px;/* 文字の行間 */
145  font-size: 22px;/* 文字の大さ */
146  font-weight: 900;/* 文字の太さ */
147  text-align: center;/* 文字を中央に配置 */
148  color: #4e4e4e;
149  vertical-align: 10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
150  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
151  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
152text-align: center;/* ブロック要素のみしか本来適応できない */
153}
154
155/* 送信ボタンの大きさ、スタイル */
156.auto-style4 {
157
158  margin-top: 40px;
159  /* 画像の上の余白 */
160  height: 80px; /*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
161  え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
162  width: 370px;/*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
163  え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
164  padding: 0;
165  font-size: 35px;
166  
167  margin-bottom: 40px;
168  
169  }
170  
171
172

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

回答1件

ベストアンサー

エラー文言を出力する場所の話なのでJavaもJavaScriptも関係ないかと。
（それにJavaはどちらかというと役割はPHP側です。JavaScriptとは別物です）

JavaScriptを使ったとしても結局はエラー文言を出すタイミングと場所の問題なので、どういう手を使ったとしても大抵のことは可能です。

投稿2021/11/22 11:58

m.ts10806

総合スコア80875

gujhufiugho

2021/11/27 13:09

回答ありがとうございます。wifiが故障して返信遅れました。すみません。ＰＨＰのスタイルシートの下の方に<script>（エラーメッセージ）のコード if (name.value == "") msg += "<li>名前を入力してください</li>";　を追加したのですが、<script>が起動しないです。PＨＰが起動するだけです。main.js内のスタイルシートの<script>はきちんと起動するのですが。jquery-3.6.0.min.jsもアップロードしているのですが、原因はなんでしょうか？

gujhufiugho

2021/11/27 13:10

main.jsのコードを追加しました。

m.ts10806

2021/11/27 21:58 編集

＞const form = document.querySelector('#form'); とのことですが、id属性がformとつけられた要素がどこにもありません。

gujhufiugho

2021/11/29 02:30

回答ありがとうございます。そうでした。忘れてました。<form action="companyhp6form1.php" method="post" id="form">にid="form"を追加で、ちゃんと起動しました。この度はありがとうございます。上記のコードで解決と致します。お世話になりました。

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