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'])
def video():
    form = VideoUploadForm()
    if form.validate_on_submit():
        f =
        filename = secure_filename(f.filename)
            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(''))
    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>
            <form method="POST" action="" enctype="multipart/form-data">
              {{ form.hidden_tag() }}
              <div class="modal-body">
                {% if %}
                  {{"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 %}
                          <span>{{ error }}</span>
                      {% endfor %}
                {% else %}
                  {{ }}
                  <p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
                {% endif %}

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

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.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum