質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

HALU
HALU

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0リアクション

1クリップ

298閲覧

投稿2022/09/05 18:37

前提

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

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

実現したいこと

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

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

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

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

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

該当のソースコード

JavaScript

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){... 〜も消去しております

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。