My goal is to create a form that dynamically changes the background color of input fields to lightcoral when a user enters invalid data. Below is a snippet from the HTML file containing the form:
<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>
In my CSS file, I have defined the style for input fields with errors as follows:
.error {
background-color: lightcoral;
}
I am using Django tags to switch the class of the error fields from "input_field" to "error". However, despite trying various approaches, the styling does not get applied. If you have any suggestions or solutions, please let me know as I am currently stuck.