Flask-WTF 表单提交后自定义错误未显示，通常并非逻辑或验证问题，而是 HTML 结构不合法导致模板引擎无法正确遍历并渲染 form.field.errors 列表。
flask-wtf 表单提交后自定义错误未显示，通常并非逻辑或验证问题，而是 html 结构不合法导致模板引擎无法正确遍历并渲染 `form.field.errors` 列表。
在 Flask-WTF 应用中，表单字段的验证错误（包括手动添加的 field.errors.append('...') 或 form.validate_on_submit() 触发的内置校验失败）会以 Python 列表形式存储在 form.field.errors 中。要在前端展示这些错误，需在 Jinja2 模板中显式遍历该列表，并确保其包裹容器符合 HTML 语义规范。
常见错误写法（导致错误不渲染）：
<!-- ❌ 错误：仅用 <li> 而无父级列表容器 -->
<li>{{ form.username.errors }}</li>
<!-- 或更隐蔽的错误 -->
<li>{% for error in form.email.errors %}{{ error }}{% endfor %}</li>此写法虽语法上不报错，但 <li> 是行内列表项元素，必须嵌套在 <ul>（无序列表）或 <ol>（有序列表）内才能被浏览器正确解析与渲染。若缺失父容器，Jinja2 可能跳过迭代，或浏览器忽略无效结构，最终导致错误“消失”。
✅ 正确渲染方式（推荐）：
立即学习“前端免费学习笔记（深入）”；
<div class="form-group">
{{ form.password.label(class="form-label") }}
{{ form.password(class="form-control") }}
<!-- ✅ 使用 <ul> 包裹所有错误项 -->
{% if form.password.errors %}
<ul class="text-danger list-unstyled mt-1">
{% for error in form.password.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>⚠️ 关键注意事项：
- 必用语义化列表容器：<ul> 或 <ol> 不可省略，仅 <li> 无效；
- 检查错误是否存在：始终用 {% if form.field.errors %} 条件判断，避免空列表渲染冗余 <ul>；
- CSS 兼容性：若使用 Bootstrap 等框架，建议添加 list-unstyled 类清除默认样式，再通过 text-danger 控制颜色；
- 调试技巧：在模板中临时插入 {{ form.field.errors | pprint }} 查看实际错误内容，确认后端是否已正确设置错误；
- 全局错误（form-level）：如需显示 form.errors（非字段级），同样需用 <ul> 包裹，并注意其结构为字典（如 {'username': ['该用户名已被占用']}），需双层循环处理。
总结：Flask-WTF 错误不显示，90% 源于 HTML 结构失范。牢记——errors 是可迭代列表，而 <li> 必须依附于合法列表根元素。修正容器标签后，配合条件判断与语义化标记，即可稳定、清晰地呈现所有验证反馈。
