Как изменить цвет границы полей ввода загрузочных форм, если при обработке колбы wtforms выдается ошибка? - PullRequest
Новая
       8

Как изменить цвет границы полей ввода загрузочных форм, если при обработке колбы wtforms выдается ошибка?

2 голосов
/ 09 мая 2019

У меня есть форма начальной загрузки с классом form-control. Использование wtb колбы при обнаружении любой ошибки в любом из полей формы ввода. Я хочу изменить цвет границы для каждого из полей, используя скрипт script внутри ошибки for loop. Но границы цветов не меняются. Может кто-нибудь сказать мне, где я иду не так?

Вот что я пробовал: 

<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 Ответ

2 голосов
/ 09 мая 2019

Я нашел решение этого вопроса. После того, как тэг div закончится, мы можем использовать тэг style, чтобы добавить стили к элементу html на ходу. 

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

Это добавит красные границы ко всем полям класса управления формой в нашей форме. Чтобы выборочно добавить границу, вы можете присвоить идентификатор каждому элементу поля формы и назначить его отдельно.

...