入力フォームにてPHPでアラート（エラーメッセージ）を表示したいです。

●●概要
入力フォームが空白の場合にPHPでアラートによるエラーメッセージを表示したいです。
提示したコードは、①入力フォームの画面、②入力内容確認画面、③送信画面（PHPMiler）で送るコードの①の段階のものです。

提示コードに書かれているエラーメッセージのコードはjavaspiritとPHPコードで、それそれで書いていますが、データの保持やエラーメッセージがjavaspiritとPHPで２重に書かれているものを、これをできればPHPで、アラートを表示させたいです。

この提示のコードでも、全く問題なくアラート表示で動作しますが、２重にデータを受け取ったりするのが、良くないような気がします。

この提示コードで重複にせずPHPで付属画像と同じような感じにしたいです。

php
1<?php
2session_start();
3
4$errors = array();
5if ($_POST) {
6$plan = filter_input(INPUT_POST, 'plan');
7$name = filter_input(INPUT_POST, 'name');
8
9
10if (empty($plan)) $errors[] ="お問い合わせ内容を選択して下さい。 ";
11if (empty($name)) $errors[] ="名前が入力されていません。 ";
12
13
14if (count($errors) === 0) {
15$_SESSION['plan'] = $plan;
16$_SESSION['name'] = $name;
17
18/* 確認画面の表示， */
19header('Location:http:●●php');
20exit();
21 }
22}
23
24if(isset($_GET['action']) && $_GET['action'] === 'edit'){
25
26$plan = isset($_SESSION['plan']) ? $_SESSION['plan'] : '';
27$name = isset($_SESSION['name']) ? $_SESSION['name'] : '';
28}
29
30?>
31<!DOCTYPE html>
32<html lang="ja">
33<head>
34    <meta content="text/html; charset=utf-8" />
35      <title></title>
36    <link rel="stylesheet" href="companyhp6form1.css">
37  
38    <script src="jquery-3.6.0.min.js"></script>
39
40
41
42    <style type="text/css">
43
44</style>   
45</head>
46<body>
47
48<?= count($errors) ? '<ul><li>' . implode('</li><li>', $errors) . '</li></ul>' : '' ?>
49
50 <!--javascriptによるエラー表示のためid="form"を追加-->
51 <form action="companyhp6form1.php" method="post" id="form">
52
53
54
55        <span class="selectbox">
56            <select id="plan" class="plan" name="plan">
57                <option value="">お問い合わせ内容選択</option>
58               <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について
59                </option>
60                      
61            </select>
62        </span>
63    </div>
64
65
66   
67        <p class="tel-titile">
68            名前：※
69        </p>
70        <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
71    </div>
72 
73
74    <div class="auto-style1">
75
76        <button type="submit" id="submit" name="submit" class="auto-style4">
77           送信</button>
78    </div>
79   
80</form>
81
82<script>
83//javascript でエラーメッセージの表示
84const key = 'date_key';
85const form = document.querySelector('#form');
86const plan = document.querySelector('#plan');
87 const name = document.querySelector('#name');
88form.addEventListener('submit', function(event) {
89let msg = "";
90// デバッグのためチェックを外すパターンも試す
91// javascriptでエラーメッセージの表示　PHPと重複表示にしています。
92if (plan.value == "") msg += "お問い合わせ内容を選択して下さい。\n";
93if (name.value == "") msg += "名前が入力されていません。\n";
94
95
96if (msg != "") {
97event.preventDefault();
98alert(msg);
99}
100});
101
102form.addEventListener('change', function() {
103if (plan.value != "") sessionStorage.setItem('plan', plan.value);
104if (name.value != "") sessionStorage.setItem('name', name.value);
105
106// javascriptで前面遷移による、（セレクトボックスの値を保持sessionStorage
107
108let val1 = sessionStorage.getItem('plan');
109if(val1!== null)plan.value = val1;
110
111// javascriptで前面遷移による、入力フォームの値を保持sessionStorage
112
113name.value = sessionStorage.getItem('name');
114
115</script>
116
117
118</div>
119
120
121</body>
122</html>

退会済みユーザー

2022/03/03 05:35 編集

アラート？は②入力内容確認画面にて表示されるのではないでしょうか、それなのに①入力フォームの画面のphpコードしか示されていないのでは、回答者側にたいへん大きな負担になり的を射た回答がつきにくいと思います。①入力フォームで出したいのであれば、PHPでの処理ではなくフォーム送信前のJSでの処理になりますし。①入力フォームの送信先を②入力内容確認画面ではなく①入力フォームにして判定させる、という意図でしょうか？どっちみち②入力内容確認画面にも判定処理は必要になりNGなら①入力フォームに戻す必要が生じますが。

gujhufiugho

2022/03/03 05:42

少しわかりにくくすみません。①の画面（提示にあるコード）で、アラートは表示されてます。②確認表示画面はフォームに情報が全て入力しないと、アラートでいくことができないようになってます。

m.ts10806

2022/03/03 05:42

PHPはサーバーサイドの言語なのでPHPそのものでクライアント側の機能であるアラート表示は出来ません。

george

2022/03/03 05:46

質問には関係ないのですが、小言を言わせてください。 // javaでエラーメッセージの表示上記のようなjavaと書いてあるコメントを複数見かけたのですが、javascriptをjavaと略すのは良くありません。そのためjsなどの略に変えた方がいいと思います。良くない理由はjavaという他の言語が存在するため混乱してしまうからです。

gujhufiugho

2022/03/03 05:48

例えば、他のサイトの入力フォームですと、エラーメッセージにて、大抵、付属画像のような、ポップメッセージがでてくるのですが、これはPHPではできないのでしょうか？　一般的にどうでしょうか？

gujhufiugho

2022/03/03 05:49

修正します。

m.ts10806

2022/03/03 05:51

一般的も何も、そういうインタラクティブなやつはHTML＋CSS＋JavaScriptの仕事です。 PHP自身に画面表示の機能はないです。 PHPがやってるのはhttpリクエストに対するレスポンスを返すだけで、そのレスポンスの文字列をブラウザで参照するからそれをHTMLと解析して表示してくれてるだけです。サーバサイドの処理が必要でPHPが絡むことはあるでしょうけど、そのポップアップ云々の表示をPHPがやっているわけではないです。

gujhufiugho

2022/03/03 06:01

PHPMilerを使って、最終的にフォームの情報を送らなければ、ならないのですが、なので、PHPで取得した値を送る必要があって、尚且つアラートで表示させるとなると、提示したコードのように、JavaScriptとPHPの重複に値を保持する以外の方法はないでしょうか？重複は良くないですよね？

m.ts10806

2022/03/03 06:18

>PHPMiler 「マイラー」になりますが大丈夫ですか？こういうの、コード以外でも間違えてはいけない部分です（それだけで通じなくなる）コード見てないですが、JavaScriptからAjaxでPHPから返すとか、下記のようにすればブラウザ表示時にHTML内の情報として含むことは出来ますが。 <script> let hoge = "<?php echo $fuga ?>"; </script>

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

回答1件

ベストアンサー

①入力フォームの画面、②入力内容確認画面、の関係性の中で、
入力の検証を
①のJSと②のPHPでやることを無駄だと考えているようですが、
②のPHPでやることは省けません。
もちろん、③送信画面（PHPMailer）の冒頭にも同じように検証処理が必要です。
なぜなら、フォーム送信は悪意を持ってすればいくらでもいたずらできてしまうためで、
その手口や対策方法については安全なウェブサイトの作り方で配布中の無料冊子を読んでいただきたいです。

実用的なところでは、
JSとPHPとでレベル感を変えていいと思います。
JSでは簡素に必須項目の入力強制と型に合わないダメな文字の検出程度で、
より厳密なチェックはフォーム送信語にPHPにて行うかと思います。

②入力内容確認画面がこの処理専用にならないよう、
①入力フォームの画面と ②入力内容確認画面を兼ねているのが理想的です。
PHP処理冒頭でフォーム受信を検出できなければ、①入力フォームの画面、
フォーム受信を検出したならばフォームデータの検証処理を行い、問題なければ ②入力内容確認画面で確認ボタンのみ、
検証に問題があれば ①入力フォームの画面にフォームデータを反映しつつエラーも表示、
という処理の分岐になるかと。

こんなイメージ。

検証でNGとなった場合、出力するHTMLの中に、
script要素とともにJSコードを書けば、ポップアップ表示だろうかなんだろうがJSでできることができますよね。

<?php

if ($ng === true) {
?>
<script>
document.getElementById('error_message');
//～とかなんとかJSをPHPで出力する
</script>
<?php
}

（m.ts10806さんの指摘はそういう意味。）

投稿2022/03/03 06:01

編集2022/03/03 06:27

退会済みユーザー

総合スコア0

gujhufiugho

2022/03/03 06:12

①のJSと②のPHPでやることを無駄だと考えているようですが、　そうは考えてないです。PHPMilerを最終てき使うので、PHPを省かずに、アラート表示できないものかと思っていました。　それで、最初の画面①でjavascriptでアラート表示のコードを書くと、重複するのは良くないと思いませんか？

退会済みユーザー

2022/03/03 06:19

図で示したような構成にして、PHPで検証したエラー情報をHTML出力したりJSの処理に渡すことは可能です。なお、PHPでの検証処理は省けません。省くと脆弱性が生じるからです。フォーム送信は悪意を持っていたずらしようとすれば突きやすいので、CSRF対策をしたとしても完全ではない可能性があります。（こういう議論の前に、安全なWEBサイトの作り方を一読してほしいです。）

gujhufiugho

2022/03/03 06:25

分かりました。回答ありがとうございます。読んでみます。

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