回答編集履歴

1 サンプルコード削除

m.ts10806

m.ts10806 score 42749

2018/05/10 10:39  投稿

JavaScriptでチェックを入れたとしても**必ずサーバー側でもチェックはするよう**に組んでください。
ブラウザ開発ツールを利用すればhtml,JavaScriptの改ざんは可能ですのでサーバー側に想定の情報が必ず渡ってくるとは限りません(というかユーザーからの入力は信用してはいけません)
LaravelなのであればValidationの仕組みは豊富にありますし、オリジナルでValidationを作ることもできます。
---
**前提:やりたいことズバリのものを探そうとするのではなく、やりたいことの項目を細分化し、それぞれのやり方を調べて想定通り動くか確認した後に、組み合わせて調整すること。
コピペソースを探すだけでは一生身につきません。**
---
[element.length](https://developer.mozilla.org/ja/docs/Web/API/NodeList/length) で指定の要素の個数が取得できます。
このelement部分にclassを指定すれば「幾つファイル選択フォームがあるか」が分かります。
ひとまず、今回対応したいファイル選択コントロールには同じclassを指定し、他の入力コントロールには利用しないようにすること。
またtype=fileに選択があったかどうかは element.val().lengthが0かどうかで判断できます。 参考:[input fileの入力チェック](http://www.arataman.com/etc/entry-200.html)
これを組み合わせれば可能です。
対応例:
```js
$("#result").on('click', function(e){
   e.preventDefault; //アラートでエラー表示するのでsubmitを止めておく
   var file_select_count = 0;
   //ファイル選択のチェック
   $(".inputfile").each(function(i,elem) {
       if($(elem).val().length > 0){
           file_select_count++; //ファイル選択している要素をカウント
       }
   });
   //ファイル選択全ての個数とファイル選択有り要素の比較
   if($(".inputfile").length > file_select_count){
       alert("未選択あり");
       return false;
   }
//以下略
```
※対応例は削除しました。上記をヒントに組んでみて、できたら履歴より答え合わせをしてみてください。
 あくまで対応例なのでやり方はもっと沢山あります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る