javascript for文の中で一度だけアラートを出したい

セットボタンをクリックすると、
inputに何も入力されていなかったらクラスを付与して、エラー文言を表示しています。
その際にアラートを表示したいのですが、forの中にかくと項目分アラートが表示されてしまいます。

一度だけアラートを表示するためにはどの様にすればよろしいでしょうか。
教えてください！お願いいたします！！！

html
1<div id="app">
2  <input class="-reqForm1" type="text" value=""  placeholder="入力">
3  <input class="-reqForm1" type="text" value=""  placeholder="入力">
4  <input class="-reqForm1" type="text" value=""  placeholder="入力">
5  <input type="button" value="セット" @click='errorShowNextStep'>
6</div>

var app = new Vue ({
  el: '#app',
  data: {
    message: 'hello!',
  },
  methods: {
    errorShowNextStep: function(){
       var required = document.getElementsByClassName('-reqForm1');
       for(var i = 0; i < required.length; i++){
         if(required[i].value === ''){
           required[i].parentNode.classList.add('-error1');
           alert('入力してください');
         } else {
           this.showingItem_reg = 2;
         }
       }
    },
  },
});

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

回答2件

ベストアンサー

基本方針としてはfor文の中でalertを出すのを避けましょう。
何故って？1回しか動かすつもりないんだからそこにあったらおかしいでしょ？

じゃあfor文の中で検知するにはどうするか、
空である事を覚えましょう。
これがフラグという奴の本当の使い所です。

JavaScript
1var app = new Vue ({
2  el: '#app',
3  data: {
4    message: 'hello!',
5  },
6  methods: {
7    errorShowNextStep: function(){
8       var required = document.getElementsByClassName('-reqForm1');
9       // flagみたいな変数名を避け、isやhasを接頭語に持ち、true or falseがわかりやすい変数にする
10       var hasEmptyInput = false;
11       for(var i = 0; i < required.length; i++){
12         if(required[i].value === ''){
13           // フラグがtrueに変化することによって、入力していない項目を見つけたとする
14           hasEmptyInput = true;
15           required[i].parentNode.classList.add('-error1');
16         } else {
17           this.showingItem_reg = 2;
18         }
19       }
20       // for文が終了してから改めてalertを出すか否かを判定
21       if(hasEmptyInput) {
22         alert('入力してください');
23       }
24    },
25  },
26});