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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

ghtew2
ghtew2

総合スコア172

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3回答

0評価

0クリップ

212閲覧

投稿2021/11/29 10:16

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

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

付属画像1
イメージ説明

付属画像2
イメージ説明

php

<?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $plan = $_POST['plan']; $plan2 = $_POST['plan2']; $name = $_POST['name']; $furigana = $_POST['furigana']; $tel = $_POST['tel']; $email = $_POST['email']; $emailss = $_POST['emailss']; $question = $_POST['question']; if($plan === "") { $errors['plan'] ="お問い合わせ内容を選択して下さい。 "; } if($plan2 === "") { $errors['plan2'] =" 業種の選択するを選択して下さい。 "; } if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if($furigana === "") { $errors['furigana'] ="フリガナが入力されていません。 "; } if($tel === "") { $errors['tel'] ="電話番号が入力されていません。 "; } if($email === "") { $errors['email'] ="メールアドレスが入力されていません。 "; } if($emailss === "") { $errors['emailss'] ="メールアドレス(確認用)が入力されていません。 "; } if($question === "") { $errors['question'] ="お問い合わせ内容入力(150文字以内)が入力されていません。 "; } if(count($errors) === 0) { $_SESSION['plan'] = $plan; $_SESSION['plan2'] = $plan2; $_SESSION['name'] = $name; $_SESSION['furigana'] = $furigana; $_SESSION['tel'] = $tel; $_SESSION['email'] = $email; $_SESSION['emailss'] = $emailss; $_SESSION['question'] = $question; /* 確認画面の表示, */ header('Location:http://▼▼'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $plan = $_SESSION['plan']; $plan2 = $_SESSION['plan2']; $name = $_SESSION['name']; $furigana = $_SESSION['furigana']; $tel = $_SESSION['tel']; $email = $_SESSION['email']; $emailss = $_SESSION['emailss']; $question = $_SESSION['question']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>企業ホームページ お問い合わせ画面</title> <link rel="stylesheet" href="companyhp6form1.css"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="companyhp6form1responsive.css"> <script src="jquery-3.6.0.min.js"></script> <style type="text/css"> /* レスポンシブ対応で右に出る謎の余白を無くす */ .wrapper { overflow: hidden; } /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ margin-top: 30px; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body> <!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応--> <div class="wrapper"> <!--ヘッダー--> <header id="header"> <h1 class="title"> RICO NOTES </h1> </header> <section id="about3"> <div class="toiawase">お問い合わせ<span></span></div> <p class="toiawase"> 全ての項目を入力および選択して下さい。 </p> </section> <!--javaによるエラー表示のためid="form"を追加--> <form action="companyhp6form1.php" method="post" id="form"> <div class="auto-style2"> <p class="tel-titile14"> お問い合わせ内容を選択する:※ </p> <span class="selectbox"> <select id="plan" class="plan" name="plan"> <option value="">お問い合わせ内容選択</option> <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について </option> <option value="サポートについて" <?php if(isset($plan) && $plan==="サポートについて" ) { echo "selected" ;} ?> >サポートについて</option> <option value="その他弊社にお問い合わせ" <?php if(isset($plan) && $plan==="その他弊社にお問い合わせ" ) { echo "selected" ;} ?>>その他弊社にお問い合わせ </option> </select> </span> </div> <div class="auto-style2"> <p class="tel-titile15"> 業種を選択する:※ </p> <span class="selectbox"> <select id="plan2" class="plan2" name="plan2"> <option value="">業種の選択</option> <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様 </option> <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?> >個人のお客様</option> </select> </span> </div> <!--フォーム中央寄せのため1つ1つdivで囲むauto-style1--> <div class="auto-style1"> <p class="tel-titile"> 名前:※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> フリガナ:※ </p> <input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> 電話番号:※ </p> <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> メールアドレス:※ </p> <input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> メールアドレス(確認用):※ </p> <input type="text" class="emailss" name="emailss" id="emailss" value="<?php if(isset($emailss)){ echo $emailss; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> お問い合わせ内容入力(150文字): </p> <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> <footer> <small>footer</small> </footer> </div> </body> <script src="main.js"></script> <script> const form = document.querySelector('#form'); /* <form action="companyhp6form1.php" method="post" id="form"> フォームエラーの表示のため id="form" */ const plan = document.querySelector('#plan'); const plan2 = document.querySelector('#plan2'); const name = document.querySelector('#name'); const furigana = document.querySelector('#furigana'); const tel = document.querySelector('#tel'); const email = document.querySelector('#email'); const emailss = document.querySelector('#emailss'); const question = document.querySelector('#question'); form.addEventListener('submit', function(event) { let msg = ""; if (plan.value == "") msg += "<li>お問い合わせ内容を選択して下さい。</li>"; if (plan2.value == "") msg += "<li>業種の選択するを選択して下さい。</li>"; if (name.value == "") msg += "<li>名前が入力されていません。</li>"; if (furigana.value == "") msg += "<li>フリガナが入力されていません。</li>"; if (tel.value == "") msg += "<li>電話番号が入力されていません。</li>"; if (email.value == "") msg += "<li>メールアドレスが入力されていません。</li>"; if (emailss.value == "") msg += "<li>メールアドレス(確認用)が入力されていません。</li>"; if (question.value == "") msg += "<li>お問い合わせ内容を入力してください</li>"; if (msg == "") return; event.preventDefault(); alert(msg); }); </script> <script src="jquery-3.6.0.min.js"></script> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。