Flask-wtf 错误消息未正确显示答案

【问题标题】：Flask-wtf error message is not appearing properlyFlask-wtf 错误消息未正确显示
【发布时间】：2020-08-14 13:21:03
【问题描述】：

我正在创建的表单的错误消息没有以我放置的引导样式出现。这是form.py的代码：

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

这是.html代码：

{% 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 %}

即使 html 代码具有如下所示的错误样式：

{% 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 %}

它一直在下图中显示随机错误消息：

error message

【问题讨论】：

Flask-WTF 错误仅在您的表单已发送到服务器并且根据validators 列表验证的字段时才会创建。但是您还会发现，如果您检查呈现的 HTML，DataRequried() 验证器已使用 required 属性呈现您的 search 字段，这会导致浏览器在发出警告之前弹出该警告。

标签： flask flask-wtforms

【解决方案1】：

解决方法很简单，你只需要在表单中添加一个'novalidate'标签。您的代码没有任何问题。

这是因为浏览器在烧瓶表单甚至可以验证它之前就已经响应并且没有实际呈现“错误”。

因此 HTML 表单如下所示：

 <!-- 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>

参考文献

novalidate标签---->w3school

指南 -----> Miguel Grinberg

【讨论】：