Flask使用WTForms验证器时错误消息打乱输入框布局如何解决？

问题根因 #

布局异常是因为输入框和错误提示为同级元素，错误提示属于默认块级元素，插入后会截断当前行排列，导致后续输入框被迫换行。同时你的代码存在两处隐藏问题：HTML非法嵌套form标签、csrf_token拼写错误。

解决方案 #

1. 修正HTML模板

首先把内层非法嵌套的form标签改为div，再将每个输入框和对应错误提示包裹在独立容器中，避免元素互相干扰，同时修正拼写错误：

<td style="width: 100%">
<!-- 把原来的内层form改成div，禁止form嵌套 -->
<div class="guess_fields">
    {% for single_word_guess in form.guess_form %}
    <!-- 每个输入单元独立包裹 -->
    <div class="guess_item">
        {{ single_word_guess.form.guess(class_='guess_box') }}
        {{ single_word_guess.form.hidden_tag() }}
        <!-- 修正拼写错误：crsf改成csrf -->
        {{ single_word_guess.form.csrf_token }}
        {# 输出校验错误信息 #}
        {% for field, errors in single_word_guess.form.errors.items() %}
        <small class="form-text text-muted error_msg">
            {{ ', '.join(errors) }}
        </small>
        {% endfor %}
    </div>
    {% endfor %}
</div>
</td>

同时外层的冗余csrf相关代码也可以修正拼写：

{{ form.hidden_tag() }}
<!-- 修正拼写错误：crsf改成csrf -->
{{ form.csrf_token }}

2. 调整CSS样式

修改样式保证输入框横向排列，错误提示显示在对应输入框下方：

.guess_fields {
    /* 用flex布局实现稳定的横向排列 */
    display: flex;
    gap: 2%;
    width: 100%;
    align-items: flex-start;
    margin: auto;
}

.guess_item {
    /* 每个输入单元固定占比，不会被错误提示撑开 */
    width: 18%;
    flex-shrink: 0;
}

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

.error_msg {
    /* 错误提示单独占行，显示在输入框下方 */
    display: block;
    width: 100%;
    margin-top: 4px;
    word-break: break-all;
}

修改完成后输入框会始终保持横向排列，错误提示只会在对应输入框的下方显示，不会影响其他输入框的位置。

内容的提问来源于stack exchange，提问作者emilaz