Flask WTForms 验证器消息更改布局答案

【问题标题】：Flask WTForms Validator Message changes layoutFlask WTForms 验证器消息更改布局
【发布时间】：2021-05-31 12:17:09
【问题描述】：

我在 Flask 中使用 WTForms，并在提交时验证表单输入。我面临的问题发生在使用 wtforms validators 时。特别是，验证错误消息正在改变我的 HTML 页面的布局。代码如下，还附上改动的截图。

forms.py

from flask_wtf import FlaskForm
from wtforms import FieldList, FormField, HiddenField, validators
from wtforms.fields import StringField


class SingleGuessForm(FlaskForm):
    # load list of accepted vocab
    class Meta:
        csrf = False
    with open('accepted_words.txt') as f:
        l = f.readlines()
    l = [s.rstrip() for s in l]

    guess = StringField(validators=[validators.Required(message='Guess is required'), validators.AnyOf(l, message='Guess is not in vocabulary.')])


class SentenceForm(FlaskForm):
    # Disable CSRF for this class.
    class Meta:
        csrf = False

    guess_form = FieldList(FormField(SingleGuessForm), min_entries=5, max_entries=5) 

    id = HiddenField()

page.html（相关部分）

<form action="" method="POST" id="overall_guess_form">
    <table class="table">
        <tr>
            <td>
                <div class="audio_elements">
                    <audio controls class="sentence_audio"
                           id="{{ form.id.data }}">
                        <source src="{{ form.path.data }}"
                                type="audio/wav">
                    </audio>
                    <span class="iconify check_mark"
                          data-icon="emojione:check-mark-button"
                          style="visibility: hidden;"
                          data-inline="false"></span>
                </div>
            </td>
            <td style="width: 100%">
            <form class="guess_fields">
                {% for single_word_guess in form.guess_form %}
                    {{ single_word_guess.form.guess(class_='guess_box') }}
                    {{ single_word_guess.form.hidden_tag() }}
                    {{ single_word_guess.form.crsf_token }}
                    {# print errors if someone made one. Let's see if this works #}
                     {% for field, errors in single_word_guess.form.errors.items() %}
                        <small class="form-text text-muted ">
                            {{ ', '.join(errors) }}
                        </small>
                    {% endfor %}
                {% endfor %}
            </form>
            </td>
        </tr>
    </table>

    {{ form.hidden_tag() }}
    {{ form.crsf_token }}

    <div class="input submit" style="text-align: center">
        <input id="submit-button" class="btn btn-primary" type="submit"
               name="submitButton"
               value="Continue"/>
    </div>
</form>

style.css

.guess_fields {
    display: inline;
    margin: auto;
}

.guess_box {
    margin-top: 2%;
    width: 18%;
}

这是我提交之前呈现的 HTML 的样子 - 输入文本字段很好地彼此相邻，因为它们应该是：

但是提交后，布局变成了这样：

我已尝试缩短错误消息（只是“测试”），因为我怀疑下面的文本太长，但这并没有什么不同。如何在此处将输入字段保持在一行中，并在其相应的 TextField 下方显示潜在的错误消息？

【问题讨论】：

标签： html flask wtforms

【解决方案1】：

在提交表单之前和之后，您是否查看过浏览器中的源代码？我怀疑这个问题是由图例（<small class="form-text text-muted ">）引起的，它在提交后出现，当报告错误时。

我猜您正在使用 Bootstrap，所以我建议您查看 form layout 帮助，将您的表单重组为内联表单。可用的 Bootstrap 类就足够了。

【讨论】：