在 Bootstrap 模式中显示 WTForm 的验证错误

Question

我正在使用烧瓶、WTForms 和 Bootstrap。我在模态框内创建了一个表单。我遇到的问题与 WTForms 验证有关。在表单提交时，如果有任何错误，它会重新加载页面但没有打开模式（并且错误/表单显示在模式中）

如果表单中有错误，我想找到一种方法来打开模式（或者不重新加载整个页面，仅重新加载模式）。因此，如果我提交表单并且出现问题，我可以看到包含错误的相同表单，而无需手动重新打开模式。

我没有使用 AJAX，因为我不确定它如何与 flask/WTForms 一起使用。这是一个基本的帐户编辑表单，我的计划是在提交时将其重定向到不同的页面（如果没有错误）。

以某种方式使用 AJAX 会更容易吗？或者如果页面在提交后重新加载，我是否有一种简单的方法可以强制打开模式？

将数据背景设置为静态不是我想要的。

modal 中包含的表单字段示例：

<div class="form-group">
    <label for="firstname">First Name</label>
    {{form.first_name(value=s.first_name, class="form-control", id="firstname")}}
    {% for error in form.errors.first_name %}
        <span style="color: red;">[{{error}}]</span>
    {% endfor %}
</div>

Answer 1

AJAX 与Flask/WTForms 配合得很好。您可以找到许多适用于这种情况的插件。对于 AJAX 登录视图，您应该返回重定向 url 作为响应，而不是直接重定向，如果请求正确，则使用 js 重定向：window.location = '/redirect/url'。

另一种方法是在表单中放置一些标志并在页面加载时检查它以显示模式。