Flask-wtf error message is not appearing properly

user_14101726 0
Viewed 453

The error message of the form I am creating is not appearing with the bootstrap style I put. Here is the form.py code:

class SearchForm(FlaskForm):
    search = StringField('Número do protocolo', validators=[DataRequired()])
    submit = SubmitField('Buscar')

Here is the .html code:

{% extends "base.html" %}
{% block sub_content %}
<br><br>
<form method="POST" action="">
    {{ form.hidden_tag() }}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">Veja o andamento da sua denúncia</legend>
        <div class="form-group">
            {{ form.search.label(class="form-control-label") }}
            
            {% if form.search.errors %}
                {{ form.search(class="form-control is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.search.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ form.search(class="form-control") }}
            {% endif %}
            
            
        </div>
    </fieldset>
    <div class="form-group">
        {{ form.submit(class="btn btn-secondary") }}
        <a href="/client1/"><input type="button" value="Voltar" class="btn btn-secondary"></a>
    </div>
</form>
{% endblock %}

Even though the html code has the error style shown below:

{% if form.search.errors %}
                {{ form.search(class="form-control is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in form.search.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}

It keeps showing the random error message in the image below:

error message

flask-wtforms flask
1 Answers

The solution is really simple, you only need to add a 'novalidate' Tag to the Form. There is nothing wrong with your code.

This is because the browser is responding before the flask form can even be validate it and no 'errors' are actualli rendered.

Therefore the HTML form would look like this:

 <!-- Note the 'validate' tag -->
    <form method="POST" action="" novalidate>
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Veja o andamento da sua denúncia</legend>
                <div class="form-group">
                    {{ form.search.label(class="form-control-label") }}
                    
                    {% if form.search.errors %}
                        {{ form.search(class="form-control is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.search.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.search(class="form-control") }}
                    {% endif %}
                    
                    
                </div>
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-secondary") }}
                <a href="/client1/"><input type="button" value="Voltar" class="btn btn-secondary"></a>
            </div>
        </form>

REFERENCES

novalidate Tag ----> w3school

Guide -----> Miguel Grinberg

user_139039420
Related