当flask wtforms抛出错误时，如何更改Bootstrap表单输入字段的边框颜色？

Question

我有一个带有form-control 类的引导表单。在任何输入表单字段中捕获任何错误时使用 Flask wtforms。我想使用循环错误中的脚本标记更改每个字段的边框颜色。但是边框颜色没有改变。我哪里错了？

这是我尝试过的：

<form name="adminreg" id="adminreg" action="/admin-reg" method="post" novalidate>
    {{ form.csrf_token() }}
    <div class="form-group input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
        </div>
        {{ form.name(class_="form-control", placeholder="Username")}}
    </div>

    <!-- changing the border color when error using jquery-->
    {% for error in form.name.errors %}
        <script type="text/javascript">
            $(".form-control").css("border-color", "red");
        </script>
    {% endfor %}

Answer 1

我已经找到了这个问题的解决方案。在 div 标签结束后，我们可以使用 style 标签随时为 html 元素添加样式。

{% for error in form.name.errors %}
    <style>
          .form-control {border-color: red;}
    </style>
{% endfor %}

这将为我们表单中的所有表单控件类字段添加红色边框。要有选择地添加边框，您可以为每个表单字段元素指定 id 并分别定位它。