JavaScript 複数のif文をひとまとめでalertで表示させる方法

Question

前提

JavaScriptのバリデーションについて。
問い合わせフォームを作成中でございます。
エラーの場合にJavaScriptのalertを用いて、エラー文を表示させようとしております。

記載方法、考え方について、アドバイス頂けたら幸いです。

実現したいこと

if文を用いて項目が空欄の場合にエラー表示をalertで表示させたい
複数の項目がエラーに該当する場合は、一括でまとめてalertで表示をさせたい
また、項目毎に改行されるように表示させたい

発生している問題・エラーメッセージ

①配列を用いてalertを表示させると、文頭に「 , 」（カンマ）が表示される
②配列を使わずにalertを表示させると１項目に対して１回alertが表示される
→複数のエラー項目に該当する場合は該当した回数だけエラーが表示される

下記ソースコードには①を載せております。
長くなりますので、該当部分のみ抜粋して記載しております。
その他の情報必要でございましたらお申し付けください。

name,value,bodyが空欄の時、
名前が空欄です。
,メールアドレスが空欄です。
,内容が空欄です。
と表示されます。"\n"の改行がない場合は横一列に表示されます。

該当のソースコード

window.onload = function(){
//html内のbuttonのidはsubmit_buttonでございます。
  const submit_button = document.getElementById("submit_button");

//html内のinputのidはそれぞれ、name、email、bodyでございます。
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const body = document.getElementById("body");

submit_button.addEventListener('click',function(event) {
//変数 messageにpushでエラー文を格納
    let message = [];

    if(name.value ==""){
      message.push("名前が空欄です\n");
    }
   
    if(email.value ==""){
    message.push("メールアドレスが空欄です。\n");
    }

    if(body.value ==""){
    message.push("内容が空欄です。\n")
    }

  if(message.length > 0){
　alert(message);
　return;
    }

  });
    };


//②の場合は
//submit_button.addEventListeber〜以下から、

if(name.value ==""){
     alert("名前が空欄です\n");
    }
 //で記載しております。変数messageへの格納、
 //最後のif(message.length > 0){...　〜も消去しております

Answer 1

文字列を要素とする配列があって、これの全要素を何らかの文字列を区切りの文字として結合した文字列を作りたいときは、配列のメソッド join() が便利です。

質問の

文頭に「 , 」（カンマ）が表示される

のを join() を使って解消するには、以下のように修正します。

(1) message にpushする各文字列の末尾の改行 \n を削除する。

\n は join() するときに引数として渡すことにするのであれば、各メッセージ文字列の末尾に付加する必要はありませんので削除します。

- message.push("名前が空欄です\n");
+ message.push("名前が空欄です。");

- message.push("メールアドレスが空欄です。\n");
+ message.push("メールアドレスが空欄です。");

- message.push("内容が空欄です。\n")
+ message.push("内容が空欄です。");

(2) alertに表示するときに message を改行でjoinした文字列を渡す

- alert(message);
+ alert(message.join("\n"));

こうすると、たとえば3つの入力値がすべて空だった場合には、alert に

"名前が空欄です。\nメールアドレスが空欄です。\n内容が空欄です。"

という文字列が渡されます。つまり各メッセージの文字列と文字列との間に \n がはさまれるので最後のメッセージの後ろには改行が付かないことになります。

もし、最後のメッセージの後ろにも改行が必要であれば、

- alert(message);
+ alert(`${message.join("\n")}\n`);

とすればよいでしょう。

Answer 2

改行コード込みでpushするのではなく、改行コードでjoinすれば良いのではと。

let message = [];
 message.push("a");
 message.push("b");
 message.push("c");
 alert(message.join("\n"));

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join