CODEWITHSUNDEEP
twitter-bootstrapflaskbootstrap-4flask-wtformsflask-bootstrap
joe ann
joe ann

Reputation: 23

Flask_Bootstrap4 wtf quick form not showing errors

So in flask, I recently downloaded flask_bootstrap4, which is the same thing as flask_bootstrap (bootstrap 3) except for flask_bootstrap4, it uses bootstrap 4 instead of bootstrap 3. In my templates, I use this code for all my forms:

{% import 'bootstrap/wtf.html' as wtf %}
<div class="row">
        <div class="col-md-4">
            {{ wtf.quick_form(form) }}
        </div>
</div>

This worked out fine, except that when there were errors in the form, they would not display. I used the exact same thing for flask_bootstrap. Just wondering if anyone knows how to fix this. Thanks!

Upvotes: 1

Views: 1061

Answers (2)

CodeoMascot
CodeoMascot

Reputation: 159

You can add following javascipt code to your page, it will fix the issue:

document.querySelector("form > div.form-group.has-danger input").classList.add('is-invalid')

It selects all inputs that have error, then adds the missing class required in Bootstrap4, is-invalid.

More in the documentation for migration from Bootstrap 3 to 4.

Upvotes: 1

neonderprofi
neonderprofi

Reputation: 1

The only way I found to handle this yet, is to add an error handling section for every field. 

{% import 'bootstrap/wtf.html' as wtf %}
...
<form action="" method="post">
        {{ form.hidden_tag() }}
        <p>

            {{ wtf.form_field(form.username) }}
            {% for error in form.username.errors %}
            <div class="alert alert-danger" role="alert">{{ error }}</div>
            {% endfor %}
</form>

I know this is not as elegant as using the quick_form() feature, but it does the job. This way also allows you to stretch your form across multiple columns or sections of your page. You could also try catching all problematic field by passing form.errors from your route script, which will return a list of fieldnames to render_template() to flash() or otherwise display the error messages on your page.

Upvotes: 0

Related Questions