入力フォームのjavascriptによるエラーメッセ―ジを縦に表示したいです。

入力フォームのjavascriptによるエラーメッセージを縦に表示したいのですが、調べても方法がわかないので質問しました。

付属画像１のようにエラーメッセージが横並びに、横に文字いっぱに表示されてしまいます。
これを付属画像２のように箇条書きのような感じで縦に文字を表示させたいです。

付属画像１

付属画像２

php
1<?php
2session_start();
3
4$errors = array();
5
6if(isset($_POST['submit'])) { 
7
8$plan = $_POST['plan'];
9$plan2 = $_POST['plan2'];
10
11$name = $_POST['name'];
12$furigana = $_POST['furigana'];
13
14$tel = $_POST['tel'];
15$email = $_POST['email']; 
16$emailss = $_POST['emailss'];
17$question = $_POST['question'];
18
19
20
21
22
23if($plan === "") { $errors['plan'] ="お問い合わせ内容を選択して下さい。 ";
24}
25
26if($plan2 === "") { $errors['plan2'] =" 業種の選択するを選択して下さい。 ";
27}
28
29
30
31if($name === "") { $errors['name'] ="名前が入力されていません。 ";
32}
33
34if($furigana === "") { $errors['furigana'] ="フリガナが入力されていません。 ";
35}
36
37if($tel === "") { $errors['tel'] ="電話番号が入力されていません。 ";
38}
39
40
41if($email === "") { $errors['email'] ="メールアドレスが入力されていません。 ";
42}
43
44if($emailss === "") { $errors['emailss'] ="メールアドレス（確認用）が入力されていません。 ";
45}
46
47if($question === "") { $errors['question'] ="お問い合わせ内容入力（150文字以内）が入力されていません。 ";
48}
49
50
51
52
53
54if(count($errors) === 0) {
55
56    $_SESSION['plan'] = $plan;
57    $_SESSION['plan2'] = $plan2; 
58
59    $_SESSION['name'] = $name; 
60    $_SESSION['furigana'] = $furigana;
61    $_SESSION['tel'] = $tel; 
62
63    $_SESSION['email'] = $email;
64    $_SESSION['emailss'] = $emailss; 
65   
66    $_SESSION['question'] = $question;
67
68
69    /* 確認画面の表示， */
70    header('Location:http://▼▼');
71    exit();
72     }
73  }
74  
75
76  if(isset($_GET['action']) && $_GET['action'] === 'edit'){
77
78
79   
80    $plan = $_SESSION['plan'];
81   
82
83    $plan2 = $_SESSION['plan2'];
84
85
86    $name = $_SESSION['name'];
87    $furigana = $_SESSION['furigana'];
88    $tel = $_SESSION['tel'];
89
90    $email = $_SESSION['email'];
91    $emailss = $_SESSION['emailss'];
92    
93    $question = $_SESSION['question'];
94  }
95     
96    ?>
97
98  
99<!DOCTYPE html>
100
101<html lang="ja">
102
103<head>
104    <meta content="text/html; charset=utf-8" />
105    <meta name="viewport" content="width=device-width, initial-scale=1">
106    <title>企業ホームページ　お問い合わせ画面</title>
107    <link rel="stylesheet" href="companyhp6form1.css">
108    <link rel="stylesheet" href="reset.css">
109    <link rel="stylesheet" href="companyhp6form1responsive.css">
110    <script src="jquery-3.6.0.min.js"></script>
111    <style type="text/css">
112
113    /* レスポンシブ対応で右に出る謎の余白を無くす */
114        .wrapper {
115     overflow: hidden;
116 }
117
118      /* 入力フォームの位置 */
119
120      .auto-style1 {
121
122text-align: center;
123
124}
125
126
127/* セレクトボックスの位置 */
128.auto-style2 {
129
130text-align: center;
131/* セレクトボックス中央に配置 */
132margin-top: 30px;
133}
134
135
136
137
138
139
140
141
142</style>
143
144
145<?php echo "<ul>";foreach($errors as $value) {
146
147echo "<li>"; 
148echo $value; 
149echo "</li>"; 
150} 
151
152echo "</ul>";
153
154?>
155
156
157
158</head>
159
160<body>
161<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
162<div class="wrapper">
163
164    <!--ヘッダー-->
165<header id="header">
166
167    <h1 class="title">
168        RICO NOTES
169    </h1>
170</header>
171
172    <section id="about3">
173        <div class="toiawase">お問い合わせ<span></span></div>
174
175        <p class="toiawase">
176        全ての項目を入力および選択して下さい。
177       </p>
178           
179
180    </section>  
181
182
183 <!--javaによるエラー表示のためid="form"を追加-->
184    <form action="companyhp6form1.php" method="post" id="form">
185
186        <div class="auto-style2">
187
188            <p class="tel-titile14">
189                お問い合わせ内容を選択する：※
190            </p>
191
192
193
194            <span class="selectbox">
195                <select id="plan" class="plan" name="plan">
196                    <option value="">お問い合わせ内容選択</option>
197                   <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について
198                    </option>
199                    <option value="サポートについて" <?php if(isset($plan) && $plan==="サポートについて" ) { echo "selected" ;} ?>
200                        >サポートについて</option>
201                    <option value="その他弊社にお問い合わせ" <?php if(isset($plan) && $plan==="その他弊社にお問い合わせ" ) { echo "selected" ;} ?>>その他弊社にお問い合わせ
202                    </option>
203                   
204                </select>
205            </span>
206        </div>
207
208
209
210        <div class="auto-style2">
211
212            <p class="tel-titile15">
213                業種を選択する：※
214            </p>
215
216
217
218            <span class="selectbox">
219                <select id="plan2" class="plan2" name="plan2">
220                    <option value="">業種の選択</option>
221                    <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様
222                    </option>
223                    <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?>
224                        >個人のお客様</option>
225                    
226                   
227                </select>
228            </span>
229        </div>
230
231<!--フォーム中央寄せのため１つ１つdivで囲むauto-style1-->
232
233            
234    
235        <div class="auto-style1">
236
237            <p class="tel-titile">
238                名前：※
239            </p>
240            <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
241        </div>
242        <div class="auto-style1">
243
244            <p class="tel-titile">
245                フリガナ：※
246            </p>
247            <input type="text" class="furigana" name="furigana" id="furigana"
248                value="<?php if(isset($furigana)){ echo $furigana; } ?>" />
249
250        </div>
251
252        <div class="auto-style1">
253
254            <p class="tel-titile">
255                電話番号：※
256            </p>
257            <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>" />
258        </div>
259        <div class="auto-style1">
260
261            <p class="tel-titile">
262                メールアドレス：※
263            </p>
264
265            <input type="text" class="email" name="email" id="email"
266                value="<?php if(isset($email)){ echo $email; } ?>" />
267
268        </div>
269        <div class="auto-style1">
270
271
272        <p class="tel-titile">
273            メールアドレス（確認用）：※
274        </p>
275
276        <input type="text" class="emailss" name="emailss" id="emailss"
277            value="<?php if(isset($emailss)){ echo $emailss; } ?>" />
278
279        </div>
280
281            
282        <div class="auto-style1">
283            <p class="tel-titile">
284                お問い合わせ内容入力（150文字）：
285            </p>
286               <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea>
287                   
288                </div>
289            
290
291        <div class="auto-style1">
292
293            <button type="submit" id="submit" name="submit" class="auto-style4">
294               送信</button>
295        </div>
296       
297    </form>
298
299    <footer>
300        <small>footer</small>
301    </footer>
302
303
304</div>
305</body>
306 <script src="main.js"></script>
307 <script>
308  const form = document.querySelector('#form'); /* <form action="companyhp6form1.php" method="post" id="form">
309  フォームエラーの表示のため id="form" */
310
311
312 const plan = document.querySelector('#plan');
313 const plan2 = document.querySelector('#plan2');
314 const name = document.querySelector('#name');
315 const furigana = document.querySelector('#furigana');
316 const tel = document.querySelector('#tel');
317 const email = document.querySelector('#email');
318 const emailss = document.querySelector('#emailss');
319 const question = document.querySelector('#question'); 
320  form.addEventListener('submit', function(event) { 
321      let msg = ""; 
322      if (plan.value == "") msg += "<li>お問い合わせ内容を選択して下さい。</li>";
323        if (plan2.value == "") msg += "<li>業種の選択するを選択して下さい。</li>";
324        if (name.value == "") msg += "<li>名前が入力されていません。</li>";
325        if (furigana.value == "") msg += "<li>フリガナが入力されていません。</li>";
326        if (tel.value == "") msg += "<li>電話番号が入力されていません。</li>";
327        if (email.value == "") msg += "<li>メールアドレスが入力されていません。</li>";
328        if (emailss.value == "") msg += "<li>メールアドレス（確認用）が入力されていません。</li>";
329
330      
331        if (question.value == "") msg += "<li>お問い合わせ内容を入力してください</li>";
332
333if (msg == "") return; event.preventDefault(); alert(msg); 
334
335});
336</script>
337
338 <script src="jquery-3.6.0.min.js"></script>
339</html>

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

回答3件

alertでliタグを羅列して表示しようとしていますか?
あえてやるならこんな感じ

javascript
1var msg="";
2msg+="aaa\n";
3msg+="bbb\n";
4msg+="ccc";
5alert(msg);

投稿2021/11/30 00:44

yambejp

総合スコア114843

gujhufiugho

2021/11/30 02:43

回答ありがとうございます。この方法で解決できました。

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

ベストアンサー

リストタグではなく、改行コードで繋げばできます。

php
1      if (plan.value == "") msg += "お問い合わせ内容を選択して下さい。\n";
2        if (plan2.value == "") msg += "業種の選択するを選択して下さい。\n";
3        if (name.value == "") msg += "名前が入力されていません。\n";
4        if (furigana.value == "") msg += "フリガナが入力されていません。\n";
5        if (tel.value == "") msg += "電話番号が入力されていません。\n";
6        if (email.value == "") msg += "メールアドレスが入力されていません。\n";
7        if (emailss.value == "") msg += "メールアドレス（確認用）が入力されていません。\n";
8        if (question.value == "") msg += "お問い合わせ内容を入力してください\n";