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

解決済

質問者：hayosato
質問日時：2022/04/27 16:25
回答数：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>


<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">

<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>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/04/27 19:26

こんばんは

＞入力フォームの下部に「入力欄が空白です」というテキストメッセージが
＞表示されるようにしたいです。
メッセージを各要素に表示するだけなら、前のご質問に回答した 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>