Flask WTForms Validator Message 更改布局

Question

我在 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 在提交之前的样子 - 输入文本字段很好地并排放置，因为它们应该：

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

我试过缩短错误消息（只是 'test'），因为我怀疑下面的文本太长了，但这并没有什么不同。如何在此处将我的输入字段保持在行中，同时潜在的错误消息出现在其相应的文本字段下方？

Answer 1

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

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

Flask WTForms Validator Message 更改布局

Flask WTForms Validator Message changes layout

html

flask

wtforms