html - Flask WTForms 验证器消息更改布局

问题描述

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

表格.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>

样式.css

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

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

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

但提交后，布局变为：

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

标签： htmlflaskwtforms

html - Flask WTForms 验证器消息更改布局

问题描述

解决方案

推荐阅读