Q&A
「実行」ボタンが2つあって、上のボタンはそのように機能しているようですが、別のform内にある下のボタンでも同様にということでしょうか。
前提・実現したいこと
javascript初心者です。
下記ソースのようにformタグ内で複数のファイル選択フィールドを定義しています。
ファイルが一つも選択されていない場合でのsubmitボタン押下時に、アラートを表示したいと考えています。
javascript（jQuery）で実現する方法についてご教授ください。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 7 <meta name="description" content="" /> 8 <meta name="author" content="" /> 9 10 <!-- Bootstrap core CSS --> 11 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 12 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> 13 14 <title>test</title> 15 16</head> 17 18<body> 19 <div class="container"></br> 20 <div class="row"> 21 <div class="col-md-4"> 22 <form id="send" method="post" ENCTYPE="multipart/form-data" action="Receive"> 23 24 <div class="border border-info" style="padding:10px;"> 25 <div class="form-group"> 26 <label for="a">a:</label> 27 <input name="modiafy" type="file" id="a" class="form-control-file"> 28 </div> 29 30 <div class="form-group"> 31 <label for="b">b:</label> 32 <input name="b" type="file" id="b" class="form-control-file"> 33 </div> 34 35 <div class="form-group"> 36 <label for="c">c:</label> 37 <input name="c" type="file" id="c" class="form-control-file"> 38 </div> 39 40 <div class="form-group"> 41 <label for="d">d:</label> 42 <input name="d" type="file" id="d" class="form-control-file"> 43 </div> 44 </div> 45 </div> 46 47 <div class="col-md-4"> 48 <div class="border border-info" style="padding:10px;"> 49 <div class="form-group"> 50 <label for="e">e:</label> 51 <input name="e" type="file" id="e" class="form-control-file"> 52 </div> 53 54 <div class="form-group"> 55 <label for="f">f:</label> 56 <input name="f" type="file" id="f" class="form-control-file"> 57 </div> 58 59 <div class="form-group"> 60 <label for="g">g:</label> 61 <input name="g" type="file" id="g" class="form-control-file"> 62 </div> 63 64 <div class="form-group"> 65 <label for="h">h:</label> 66 <input name="h" type="file" id="h" class="form-control-file"> 67 </div> 68 </div> 69 </div> 70 </div> 71 <br /> 72 <div class="form-inline"> 73 <input class="btn btn-primary btn-sm form-control loding" type="submit" value="実行"> 74 <input class="btn btn-secondary btn-sm form-control" type="reset" value="リセット"> 75 </div> 76 </form> 77 </div> 78 <br /> 79 <div class="container"> 80 <div class="row"> 81 <div class="col-md-6"> 82 <h2>test2</h2> 83 <form id="send2" method="post" ENCTYPE="multipart/form-data" action="makeARM"> 84 <input class="btn btn-primary btn-sm loding" type="submit" value="実行"> 85 </form> 86 </div> 87 </div> 88 </div> 89 90 <script> 91 window.addEventListener('DOMContentLoaded', () => { 92 document.querySelector('#send').addEventListener('submit', e => { 93 var files = [].filter.call(e.target.querySelectorAll('[type=file]'), x => x.value !== 94 ""); 95 if (files.length == 0) { 96 e.preventDefault(); 97 alert('no file'); 98 } 99 }); 100 }); 101 </script> 102 103</body> 104 105</html> 106
試したこと
以下内容を参考にしましたが、期待する動作をしませんでした。
https://teratail.com/questions/222655
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
こんな感じでどうでしょうか？
投稿2020/11/10 10:08
総合スコア116724
<script>
$(function(){
$(':file').on('change',function(){
var flg=$(':file').filter(function(){return $(this).val()!=="";}).length>0;
$(':file').prop("required",!flg);
}).trigger('change');
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="file" name="a"><br>
<input type="file" name="b"><br>
<input type="file" name="c"><br>
<input type="submit" value="send">
</form>
ご確認、ご回答ありがとうございます！
コードを参考にして想定の動作をかくにんすることができました。
上記の場合、以下で部分で固定表示されますが、これをアラート（モーダル？）通知することは可能でしょうか？
<input type="file" name="a">
追加で申し訳ありませんがご検討のほどよろしくお願いいます。
あなたの回答
tips
プレビュー
