JSで一つもファイル選択されなかったらエラーメッセージをアラート表示するという処理をしたい。

html
1<form action="check.php" method="post" name="send" enctype="multipart/form-data">
2
3  <div class="input-box">
4    <p class="title label-required">aaa.</p>
5    <input type="text" name="q01" value="a<?php if(isset($_GET['num'])) { $num = $_GET['num']; echo $num; } ?>" required="required">
6  </div>
7
8  <div class="input-box">
9    <p class="title label-required">bbb</p>
10    <input type="text" name="q02" value="a" required="required" style="ime-mode: inactive;">
11  </div>
12
13======================================================================================================================
14  <div class="input-box">
15    <p class="title label-required">その他の商品画像（最大10点まで）</p>
16
17    <?php for ($loop = 0; $loop < 2; $loop++) { ?>
18      <div class="btn-files-wrap mb3">
19        <div class="btn-files btn02_<?php echo $loop; ?>">ファイルを選択</div>
20        <input type="file" name="q10<?php echo $loop; ?>" id="files02<?php echo $loop; ?>" accept="image/*">
21        <input id="filename02<?php echo $loop; ?>" value="" placeholder="選択されていません" readonly>
22      </div>
23    <?php } ?>
24  </div>
25  ======================================================================================================================
26
27    <div class="input-box">
28      <p class="title label-required">ccc</p>
29      <input type="text" name="q11" placeholder="例）クリスマスフェア" required="required" value="a">
30    </div>
31
32    <div class="next-btn">
33      <div class="link-box">
34        <p class="type-next" onClick="JavaScript:next_kantan()">確認画面へ<img src="common/img/icon_form_next.png" alt=""></p>
35      </div>
36    </div>
37</form>

js
1	if(document.send.q01.value == ""){alert('デザインNo.をご確認ください');frg = 1;return false}
2  else if(document.send.q02.value == ""){alert('店舗名をご入力ください');frg = 1;return false}
3===================================================================================================================
4  for (var i = 0; i < 2.length; i++) {
5    else if(document.send.q10[i].value == ""){alert('その他の商品画像を選択してください');frg = 1;return false}
6  }
7===================================================================================================================
8  else if(document.send.q11.value == ""){alert('メインタイトル（キャンペーン名）をご入力ください');frg = 1;return false}

上のコードの囲ってる部分に当たるのですが、フォームのバリデーションの設定でファイルを複数選択する処理を追加しているのですが、

最低一つは追加してもらう為に、一個でも追加されなかったらエラーを出したいのですがコードの書き方が分からないです。

もし、分かる方がおられたら教えて頂きたいです。

宜しくお願い致します。

※注意
q10の箇所は、nameを当てておりq100,q101のようになってます。

m.ts10806

2019/11/12 06:55

htmlもご提示ください。またphpは今回直接関係ないように思います

nagashima_naoya

2019/11/12 07:02

すみません、なるほどですね。html追加しました。

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

回答2件

ベストアンサー

データが煩雑なのでtype=fileだけにしぼって

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#send').addEventListener('submit',e=>{
4    var files=[].filter.call(e.target.querySelectorAll('[type=file]'),x=>x.value!=="");
5    if(files.length==0){
6      e.preventDefault();
7      alert('no file');
8    }
9  });
10});
11</script>
12<form id="send" method="post" enctype="multipart/form-data">
13<input type="file" name="a"><br>
14<input type="file" name="b"><br>
15<input type="file" name="c"><br>
16<input type="submit" value="send">
17</form>