Как изменить цвет фона поля ввода формы Django, если оно содержит ошибки

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

Вот фрагмент HTML-файла, который содержит саму форму:

 <div id="div_formbox">
        <form method="post" id="form_appointments">
            {% csrf_token %}
            
            {{ form.non_field_errors }}
                          
            <div class="input_group">
                
                <div class="input_field {% if form.name.errors %}error{% endif %}">
                    {{ form.name}}
                </div>
                
                <div class="input_field {% if form.last_name.errors %}error{% endif %}">
                    {{ form.last_name }}
                </div>
                                              
                
                <div class="input_field {% if form.email.errors %}error{% endif %}">
                    {{ form.email }}
                </div>
                               
       
            </div>
    
            <button type="submit">Send</button>
        </form>
    </div>

А вот часть CSS-файла, в которой я пытаюсь применить изменение цвета к полям ввода с ошибками:

.error {
   background-color: lightcoral;
}

Как видите, я использую теги Django, чтобы изменить класс полей формы с ошибками с "input_field" на "error". Далее, в CSS-файле я ссылаюсь на класс "error", чтобы применить нужный мне стиль. Но это не работает. Я перепробовал кучу вариантов, но ни один не сработал. У меня нет идей.

Может быть, попробуйте сделать так, как показано ниже.

.error {
   background-color: lightcoral !important;
}

Откройте инструменты разработчика в браузере и проверьте, загружен ли CSS-файл, имя класса и свойства элемента в разделе стилей под вкладкой "Элемент", убедитесь, что все действительно в нужном виде. Возможно, css-файл загружен неправильно.

Каков тип аргумента form, передаваемого в функции просмотра? form.name.errors немного запутано, поскольку форма должна быть моделью, а имя - свойством (возможно, CharField), но все же вы получаете доступ к error свойству поля, которое не упоминается в Docs как стандартная встроенная опция.

Думаю, вам нужно упомянуть события JavaScript, при которых цвет должен меняться. Например, при отправке или при наведении мыши. Потому что в данном случае форма не может изменить цвет.

Надеюсь, это будет полезно.

Вернуться на верх