Как сделать проверку ввода файла при нажатии?

на сайте бутсреп нашла статью https://getbootstrap.com/docs/5.0/forms/validation/ мне нужна проверка на файл в модалке. вот мой код

    <!-- Modal -->
<form class="row g-3 needs-validation" novalidate>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">  Загрузить из XML</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         
        <div asp-action="GetXML" asp-controller="AutoTestDetails" method="post" enctype="multipart/form-data" required>
         <input class="btn btn-danger" type="file" name="uploadedFile" />
         <pre> </pre>
          <input  id="btn" class="btn btn-primary" type="submit" value="Загрузить" />
           <div class="invalid-feedback">
      Please select a valid state.
    </div>
        </div>
        
      </div>
    </div>
  </div>
</div></form>

 <script type="text/javascript">
       (function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
}
    </script>

кажется я не сильна в синтаксисе толи js толи asp.net. но что есть у меня что нет этого js кода при нажатии на кнопку он просто закрывает форму(даже если условие выполнено, в таком случае там вообще переход в другое представление)

что надо поправть? не могу понять