Как отображать gif только в модальных окнах в django при нажатии кнопки «Отправить», если форма заполнена

Question

Я новичок в stackoverflow, это мой первый пост, поэтому, пожалуйста, примите мои извинения, если мне что-то не так. Я подготовил страницу загрузки в Django. Кнопка отправки активирует модальную страницу начальной загрузки с анимированным gif + текстом «пожалуйста, подождите». Если файл для загрузки не предоставлен или отказ от ответственности не прочитан, на странице отображается сообщение об ошибке по умолчанию, и больше ничего не должно происходить; но модальная страница открывается и активна навсегда. Я бы хотел, чтобы модальная страница открывалась только при наличии данных и файлов.

Проблема в том, что я совсем новичок в Django (образование всего за несколько месяцев), я совсем не знаю java / jquery, и я не очень разбираюсь в HTML, исходя из математики и python. Я попытался адаптировать некоторые сценарии jquery, предоставленные в Stackoverflow, как пример "Показать загрузочное изображение после нажатия кнопки отправки, когда форма действительна" и в "Как получить диалоговое окно jQuery, которое отображается только в том случае, если форма проверяется при нажмите кнопку "Отправить"? Я пытался адаптировать функции jquery к моим данным, но мне это не удалось.

Я также пытался вставить «data-dismiss» и modal.close внутри оператора {% if%}

'''
Models
'''
class Mydata (models.Model):
    myfile = models.FileField() 
    mychoice = models.ForeignKey(Model1) 
    user = models.ForeignKey(settings.AUTH_USER_MODEL,)
'''
Forms
'''
class MydataCreateForm(ModelForm):
    disclaimer = BooleanField(required=True, label='I agree with the disclaimer')
    class Meta:
        model = Mydata
        fields = ("myfile", "mychoice",)
'''
Views
'''
class MydataCreateView(LoginRequiredMixin, generic.CreateView): 
    form_class = MydataCreateForm
    model = Mydata 
    def get_form(self, form_class=None):
        form = super().get_form(form_class)
        form.fields['mychoice'].required = True 
        return form

    def dataform_valid(self, form):
        form.instance.user = self.request.user 
        self.object = form.save() 
        return HttpResponseRedirect(self.get_success_url()) 
'''
Html
'''
{% block content %}
<div class="container ">
  <form method="POST" enctype="multipart/form-data" id="mydata-form">
    {% csrf_token %}
    {{ form | bootstrap }}

    <button id="download"  class="btn btn-primary active" aria-pressed="true" type="submit" data-backdrop="static"  data-target="#myModal"> Download</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Please wait</h4>
            </div>
            <div class="center">
              <img src="{% static 'images/myImage.gif' %}"/>

Я бы хотел что кнопка «скачать» и анимированный gif запускаются, только если указаны mychoice, myfile и disclaimer что при наличии кнопки «скачать» данные сохраняются и перенаправляются на другой URL с некоторыми результатами, как в настоящее время.
Я решил проблему, используя что-то еще: скрипт, найденный в учебнике по начальной загрузке, но это интеллектуально неудовлетворительно. Окно с ошибкой появляется перед модальным окном «пожалуйста, подождите», чтобы пользователь мог увидеть свою ошибку. Я публикую это решение на тот случай, если кому-то будет интересно. (https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp)

 <script type="text/javascript">
function showPleaseWait() {
   var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\
       <div class="modal-dialog">\
           <div class="modal-content">\
               <div class="modal-header">\
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
                   <h4 class="modal-title">Please wait</h4>\
               </div>\
               <div class="modal-body">\
                   <div class="progress">\
                     <div class="progress-bar progress-bar-striped active" role="progressbar"\
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">\
                     ...closing divs ...
   $(document.body).append(modalLoading);
   $("#pleaseWaitDialog").modal("show");
}
</script>