I am facing an issue with my bootstrap modal window and form. I use flask.flash() to display error messages, but when I click upload for the first time, the modal window closes. The error message only shows up when I reopen the modal window. I want the error message to appear when I click the Upload button without closing the modal if there is an error. If there are no errors, it should work as usual. Is this something that can be fixed by using JavaScript (which I am not familiar with), or can it be achieved through flask and bootstrap? Any help would be appreciated.
https://i.sstatic.net/XQYFa.png https://i.sstatic.net/XaU8E.png
<form method="post" action="{{ url_for('index') }}" enctype="multipart/form-data">
<div class="modal-body">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="input-group mb-3">
<div class="custom-file">
<input type=file name=dump_file class="file-input" id="custom-file-input" multiple>
<label class="custom-file-label" for="custom-file-input" data-browse="Browse">Choose file</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="radio" class="custom-control-input" value="linux">
<label class="custom-control-label" for="customRadioInline1">Linux</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="radio" class="custom-control-input" value="windows">
<label class="custom-control-label" for="customRadioInline2">Windows</label>
</div>
<!-- <span class="glyphicon glyphicon-paperclip"></span> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-info">Upload</button>
</div>
</form>
</div>
</div>
</div>