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

Question

我有一个 Bootstrap 表格 form-control class。当在任何输入表单字段中发现任何错误时使用 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 %}

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

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

How do I change border color of Bootstrap forms input fields when flask wtforms throws error?

html

css

jquery

flask

flask-wtforms