'How to prevent Flask-WTF forms from closing modal when submitting invalid input?

I am trying to build a website where you can upload a video (this already works). But when submitting a wrong file format, the Flask-WTF form closes the modal. I want it to stay open.

(I am trying it first with an image PNG)

This is the form:

class VideoUploadForm(FlaskForm):
    video = FileField('Upload video', validators=[FileAllowed(['png']), FileRequired()])
    submit = SubmitField('Upload')

This is the route:

@main.route("/video", methods=['GET', 'POST'])
@login_required
def video():
    form = VideoUploadForm()
    if form.validate_on_submit():
        f = form.video.data
        filename = secure_filename(f.filename)
        f.save(os.path.join(
            os.path.abspath(os.path.join(os.path.dirname(os.path.realpath(__file__)), os.pardir)), 'static\\videos', filename
        ))
        flash('Video has been succesfully uploaded', 'success') 
        return redirect(url_for('main.video'))
    return render_template('video.html', title='Upload video', form=form)

This is the modal:

<div class="modal fade mt-5" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Upload video</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form method="POST" action="" enctype="multipart/form-data">
              {{ form.hidden_tag() }}
              <div class="modal-body">
                
                {% if form.video.errors %}
                  {{ form.video(class="form-control form-control-lg is-invalid") }}
                  <p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
                  <div class="invalid-feedback">
                      {% for error in form.video.errors %}
                          <span>{{ error }}</span>
                      {% endfor %}
                  </div>
                {% else %}
                  {{ form.video }}
                  <p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
                {% endif %}

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                {{ form.submit(class="btn btn-primary") }}
              </div>
            </form>
          </div>
        </div>
      </div>

How to prevent the modal from closing when I try to upload a jpg file for example? For now it will close the modal and if opened again it shows the error message. But i want it to stay open so that you immediately can see the error message.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source