javascript エラー内容一括表示

お世話になります。
現在ユーザー情報を登録するための画面を作成しているのですが、入力項目の中には必須項目がいくつかあり、以下のように未入力だった場合1項目ずつアラートを出すような記述をしています。

js
1if(str.length < 1){
2        alert('○○は入力必須項目です。');
3        return;
4}
5if(str2.length < 1){
6        alert('○○は入力必須項目です。');
7        return;
8}
9if(str3.length < 1){
10        alert('○○は入力必須項目です。');
11        return;
12}
13if(str4.length < 1){
14        alert('○○は入力必須項目です。');
15        return;
16}

こういった記述の場合だと、仮に4項目全部を入力市内で処理を進めた場合でも1番目のアラートしか表示されません。
そこで、一度のアラートで未入力の項目すべてを表示させるように変更したいのですが、どのようにしたらまとめられるでしょうか

○○、○○、○○
以上の項目は、必須項目になります。

↑のようなアラートになるようにしたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

なにかをまとめて処理したいのであれば、一度変数に記録しておいて、最後に一気に処理をする流れに変える必要があります。以下のコードは、チェックに引っかかった項目を配列に入れておいて、最後に配列を元にエラーメッセージを出力しています。

JavaScript
1var requireParams = [];
2if(str.length < 1){
3        requireParams.push("◯◯");
4}
5if(str2.length < 1){
6        requireParams.push("△△");
7}
8if(str3.length < 1){
9        requireParams.push("□□");
10}
11if(str4.length < 1){
12        requireParams.push("××");
13}
14if(requireParams.length > 0) {
15        alert(requireParams.join("、") + "\n以上の項目は、必須項目になります");
16        return;
17}

投稿2017/02/24 09:04

masaya_ohashi

総合スコア9210

とりあえずreturnをしなければ下に流れます

javascript
1var flg=false;
2if(str.length < 1){
3  alert('○○は入力必須項目です。');
4  flg=true;
5}
6if(str2.length < 1){
7  alert('○○は入力必須項目です。');
8  flg=true;
9}
10if(str3.length < 1){
11  alert('○○は入力必須項目です。');
12  flg=true;
13}
14if(str4.length < 1){
15  alert('○○は入力必須項目です。');
16  flg=true;
17}
18if(flg) return;
19