付属の写真のようにエラーが出るようにしたいです。
提示したコードだけでは、エラーメッセージ文字が上の方に出てくるだけで、四角い図形も出てきません。
javascriptでエラーメッセージを出せれば、写真のようなになると思います。
そこでなのですが、
PHPのコードはそのまま崩さずjavascriptでも同じエラーメッセージ出すコードが書けません。どうコードを書いたら
よいでしょうか?
nameとquestionの2つフォームとがあります。
回答よろしくお願いいたします。
<?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>
No.1ベストアンサー
- 回答日時:
こんにちは
入力の有無のチェックを行いたいようですが、ご提示の内容はチェックの対象となる内容ではないですよね?
肝心の情報が欠如しているので、どのようにチェックするのかは回答しようがありませんね。
>PHPのコードはそのまま崩さず~~
PHPはよく知りませんけれど、
>if(count($errors) ===
って、どうみても尻切れトンボだし、head内に開始タグのないリストを出力してみたりと、ハチャメチャな気がしますけれど・・・
元のHTMLがどうになっているのかまったくわかりませんけれど、「入力の有無」のチェック程度であれば、最近のブラウザならスクリプトなどを使わなくても促せるUIにすることは可能です。
以下、ご参考にでもなれば。
<form action="#" method="post" style="display:inline-flex;flex-direction:column;">
<label>名 前 :
<input name="name" type="text" placeholder="お名前の入力" required />
</label>
<label>ふりがな:
<input name="kana" type="text" placeholder="ふりがなの入力" required />
</label>
<label>電話番号:
<input name="phone" type="tel" placeholder="電話番号の入力"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
</label>
<label>メールアドレス:
<input name="mail" type="email" placeholder="メールアドレスの入力" required />
</label>
<label>年 代 :
<select name="age" required>
<option value="">--年代を選択--</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
<option value="40代">40代</option>
</select>
</label>
<p><input name="submit" type="submit" value="送信" /></p>
</form>
※ どうしてもスクリプトを使いたいのであれば、submit時のイベント処理で、各値の存在をチェックしてメッセージを表示するなり、スクリプトからsubmitをするようにすれば良いでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery.validate.jsについて
-
javascriptの値をformのinput h...
-
Javascriptでのbuttonのname属...
-
ボタンを押すとテキストボック...
-
テキストエリアをenterキーでフ...
-
配列の添え字の計算について
-
エクセル マクロ submitについて
-
動的にTabindexの値を変えたい!
-
ラジオボタンでクリックした値...
-
ファイル選択ダイアログが表示...
-
return trueとreturn falseの用...
-
クリックさせたいが、click()が...
-
COBOLの数字チェック
-
プルダウン選択を変更すると、...
-
Selenium.ChromeDriverの使い方...
-
javascriptでASPにデータを渡す
-
submitした値を返したい
-
selectのonChangeが動作しません
-
JavaScriptの「.querySelectorA...
-
innerHTMLで自動生成された表を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
-
動的にTabindexの値を変えたい!
-
JavaScriptにて動的に配列を作...
-
name属性のないformタグの、中...
-
ファイル選択ダイアログが表示...
-
テキストボックスの入力をリセット
-
ラジオボタンでクリックした値...
-
ASP.NETでNAME属性を固定にしたい
-
cookie使用時にundefinedと表示...
-
Javascriptでのbuttonのname属...
-
複数のテキストフィールドを同...
-
ボタンを押すとテキストボック...
-
javascriptの値をformのinput h...
-
二つの入力欄に、同時に同じ文...
-
doPostBack 関数について
-
テキストボックスの値同士を比...
-
ひ孫に当たるiframe から親ウイ...
-
出発駅A、到着駅Bを選択すると...
-
GETパラメータの内、空文字のク...
おすすめ情報