※ ChatGPTを利用し、要約された質問です（原文：入力フォームのエラーメッセージをJavaScrip）
JavaScriptを使用して入力フォームのエラーメッセージを表示する方法
このQ&Aのポイント
入力フォームのエラーメッセージを表示するには、JavaScriptを使用します。
PHPのコードを変更せずに、JavaScriptだけでエラーメッセージを表示することができます。
JavaScriptを使用することで、写真のようなエラーメッセージの表示が可能です。
入力フォームのエラーメッセージをJavaScrip
付属の写真のようにエラーが出るようにしたいです。
提示したコードだけでは、エラーメッセージ文字が上の方に出てくるだけで、四角い図形も出てきません。
javascriptでエラーメッセージを出せれば、写真のようなになると思います。
そこでなのですが、
PHPのコードはそのまま崩さずjavascriptでも同じエラーメッセージ出すコードが書けません。どうコードを書いたら
よいでしょうか？
nameとquestionの２つフォームとがあります。
回答よろしくお願いいたします。
<?php
session_start();
$errors = array();
if(isset($_POST['submit'])) {
$plan = $_POST['plan'];
$name = $_POST['name'];
$question = $_POST['question'];
if($name === "") { $errors['name'] ="名前が入力されていません。 ";
}
if($question === "") { $errors['question'] ="お問い合わせ内容入力（150文字以内）が入力されていません。 ";
}
if(count($errors) ===
$_SESSION['name'] = $name;
$_SESSION['question'] = $question;
/* 確認画面の表示， */
header('Location:http://▼▼php');
exit();
}
}
if(isset($_GET['action']) && $_GET['action'] === 'edit'){
$name = $_SESSION['name'];
$question = $_SESSION['question'];
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title>お問い合わせ画面</title>
<style type="text/css">
/* 入力フォームの位置 */
.auto-style1 {
text-align: center;
}
</style>
<?php echo "<ul>";foreach($errors as $value) {
echo "<li>";
echo $value;
echo "</li>";
}
echo "</ul>";
?>
</head>
<body>
<form action="companyhp6form1.php" method="post">
<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">
お問い合わせ内容入力（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>
</body>
<script src="main.js"></script>
</html>
お礼
詳しい説明ありがとうございます。