javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。

解決済

質問者：hayosato
質問日時：2023/06/13 17:58
回答数：2件

javascriptで入力フォームが空欄の時に送信ボタンを押すと、アラートによるエラーを出すコードを書いています。
このコードできちんと起動します。
<script>タグ内の、let msgで""の空白の変数を指定して、その下のコード
if (email.value == "")の意味は、セレクト名emailのフォームが空白ならばメールアドレスが入力されていません、というエラーを出してください・・・という意味ですよね。

しかしその次の
msg += "メールアドレスが入力されていません";
msg＋＝の変数msgも空白という意味のようですが、空白とい意味のmsgの変数に"メールアドレスが入力されていません"を結合させる理由は、なんでしょうか？

msgはこの場合単純に入力フォームの空白のことを意味するのでしょうか？それともmsgの意味は付属画像にあるような、ブラウザのアラートのグレーの四角い板でしょうか？

回答よろしくお願いいたします。

<body>
<form action="form1.php" method="post" id="form">

メールアドレス
<input type="text" class="form1" name="email" id="email" value="" />

<button id="submit" class=""></button>

</form>
</body>

<script>

form.addEventListener('submit', function(event) {
let msg = "";
if (email.value == "") msg += "メールアドレスが入力されていません";

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

</script>

質問に記載しなかったのですが、メールアドレスの入力欄の他に名前を入力する欄がありまして、
空白の場合にボタンを押すと、複数チェックする仕様でした。
form.addEventListener('submit', function(event) {
let msg = "";
if (email.value == "") msg += "メールアドレスが入力されていません";
if (name.value == "") msg += "名前を入力して下さい";

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

続きます。すみません。

No.1の回答に寄せられた補足コメントです。補足日時：2023/06/14 17:59
通報する
msgは空白""を意味しますが
msg += "名前を入力して下さい";は、なぜmsgと"名前を入力して下さい"を結合代入する必要があるのでしょうか？

上記のコードに
if (name.value == "") "名前を入力して下さい";　でmsg +=の部分を消去するとボタンを押すとエラーになってしまいます。

補足日時：2023/06/14 18:02
通報する

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： fujillin
回答日時：2023/06/13 18:40

こんにちは

ご存じと思いますが
＞msg += "メールアドレスが入力されていません";
は、
　msg = msg + "メールアドレスが入力されていません";
と同値です。

＞結合させる理由は、なんでしょうか？
ご提示のケースで言えば、特に意味はないですね。
もとの値に何か入っていたり、条件によって連結しなかったりを繰り返すようなら意味がありますよね？
例えば、複数の入力欄をチェックして、問題のある部分のメッセージだけを連結してゆくとか・・

ご提示の場合であれば、「+」を除いて
　if (email.value == "") msg = "メールアドレスが入力されていません";
としても同じですし、その前の1行も併せてしまって、
　const msg = email.value?"":"メールアドレスが入力されていません";
のように、まとめても同じ結果が得られます。
（多分、記述した人の気分でしょう）

もっと言うなら、変数msg の値が "" のままで使われる（＝表示される）ことはないので、チェック部分全体を
　if (! email.value) {
　　event.preventDefault();
　　alert("メールアドレスが入力されていません");
　｝
としてしまっても、実質的には同じ内容になりますね。
（msg 変数が不要になりました）

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。感謝いたします。

通報する

お礼日時：2023/06/14 17:44

No.2

回答者： fujillin
回答日時：2023/06/14 18:45

No1です。

＞質問に記載しなかったのですが～～
記載のない情報に関しては、こちらでは知る由もありません。

No1で丁度例に挙げておいた「複数の～～」の場合に該当るようですので、その場合であれば意味があります。
入力のない欄に対するメッセージだけをmsg変数に作成する意図でしょう。

＞if (name.value == "") "名前を入力して下さい";
＞でmsg +=の部分を消去するとボタンを押すとエラーになってしまいます。
文法的に成立していませんので、処理内容がどうの以前にエラーが発生します。