当烧瓶wtforms抛出错误时,如何更改引导程序表单输入字段的边框颜色?

时间:2019-05-09 10:24:00

标签: jquery html css flask flask-wtforms

我有一个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 %}

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:2)

我找到了解决此问题的方法。 div标签结束后,我们可以使用样式标签随时随地向html元素添加样式。

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

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