重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：1件

ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表示されるようにしたいです。

名前の入力フォームが空の時にJavascriptによるアラートエラーがボタンをクリックした時に出るようになっています。それとは別にさらに、ボタンを押したときに、アラートの他に、入力フォームの下部に 「入力欄が空白です」というテキストメッセージが表示されるようにしたいです。

付属画像のような感じです。
どうコードを書いたらよいでしょうか？
回答よろしくお願いいたします


<!DOCTYPE html>

<html lang="ja">

<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="mouthlp.css">

<title></title>

<style>


</style>

</head>
<body>

<!--javaによるエラー表示のためid="form"を追加-->
<form action="LPmouth1.php" method="post" id="form">


<div class="auto-style1">

<p class="tel-titile">
名前：※
</p>

<input type="text" class="name" name="name" id="name"
value="" />

</div>


<div class="auto-style1010">
<!--classを２つ追加　 example8、画像の大きさ指定　　button-simple yureru-sは左右に動くアニメーション-->
<button type="submit" id="submit" name="submit" class="auto-style40" value="submit">
<img src="image/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example80" /></button>
</div>

</form>

<div class="kuuhaku30"></div><!--空白の設定-->


<script>
// javaでエラーメッセージの表示
const key = 'date_key';
const form = document.querySelector('#form');

const name = document.querySelector('#name');

form.addEventListener('submit', function(event) {
let msg = "";


if (name.value == "") msg += "名前が入力されていません。\n";


if (msg != "") {
event.preventDefault();
alert(msg);
}
});

form.addEventListener('change', function() {

if (name.value != "") sessionStorage.setItem('name', name.value);

});

name.value = sessionStorage.getItem('name');

</script>

</body>

</html>

「ボタンをクリックした時に、入力フォームの」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



＞入力フォームの下部に 「入力欄が空白です」というテキストメッセージが
＞表示されるようにしたいです。
メッセージを各要素に表示するだけなら、前のご質問に回答した required 属性を利用することでほぼ同様のことはスクリプトなしでも実現可能です。
https://oshiete.goo.ne.jp/qa/12920671.html

一方で、添付の図を見ると、文言がそれぞれでの要素によって変わっているようですが・・・
チェックの都度、メッセージをを追加・挿入するような方法でも勿論可能ですが、あらかじめメッセージをHTML内に記述しておいて、表示/非表示の切り替えで行う方法が簡単だと思います。

以下、ごく簡単な一例です。（空白のチェックしか行っていません）
※ 対象は input[type="text"] にしてありますが、セレクタを変えることで、特定の条件の要素だけを対象にすることも可能です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="text"] { width: 20em; height: 2em; border: 2px solid navy; }
.alert { font-size: 0.85em; font-weight: bold; color: crimson; }
.alert { visibility: hidden; }
.alert.show { visibility: visible; }
</style>
</head>

<body>
<form action="" id="form1">
<div>
お名前：<br />
<input type="text" name="name" value="" />
<div class="alert">・お名前をご入力してください</div>
</div>
<div>
ふりがな：<br />
<input type="text" name="kana" value="" />
<div class="alert">・ふりがなをご入力してください</div>
</div>
<p><button type="submit" >SUBMIT</button></p>
</form>

<script>
{
const
form1 = document.getElementById('form1'),
inputs = [...form1.querySelectorAll('input[type="text"]')],
Checker = (elm)=>{
const cls = elm.nextElementSibling.classList;
const flag = elm.value.trim() == "";
if(flag) cls.add('show'); else cls.remove('show');
return flag;
};

form1.addEventListener('change', e=>{
if(inputs.indexOf(e.target) >= 0) Checker(e.target);
});
form1.addEventListener('submit', e=>{
if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault();
});
}
</script>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。やりたかったのはこの方法でした。助かりました。

通報する
お礼日時：2022/04/27 22:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報