django表单：字段为必填或有错误时的样式小部件

Question

I'm creating a django form and I can't seem to access each field's widget to style it differently when there's an error or when the field is required (eg: highlight the field's box).

HTML:

{% block content %}
  <form action="" method="POST" class="form">  {% csrf_token %}
    {% for field in form %}
      <div class="fields-container">
        <p class="label">{{ field.label }}</p>
          {{ field }}
      </div>
      {{ field.errors }} 
    {% endfor %}
    <button type="submit" id="form-button">Submit</button>
  </form>
{% endblock %}

CSS:

.label {
  margin: 0 5px 0 0;
  width: 20%;
  text-align: left;
}


#id_full_name, #id_email, #id_message {
  margin: 0;
  flex: 1 1;
}

#id_message {           
  resize: none;
  overflow: auto;
}


.errorlist {                /*default css class for form errors*/
  color: 999999;
  font-size: 75%;
  font-weight: bold;
  list-style: none;
  margin-bottom: 5px;
  align-self: flex-start;       
}

I've been accessing and styling the widgets using #id_fieldname, but I've tried the following and it didn't work:

#id_fieldname.required, id_fieldname.error { border: 2px solid red; }

Thanks in advance!

Answer 1

You could add a class 'required' in your container <div> :

<div class="fields-container {% if field.field.required %}required{% endif %}">

Using django form methods form.as_p , form.as_ul , form.as_table , this would be done automatically if you declare a specific css class for required fields in your Form, for example:

class myForm(forms.Form):
     required_css_class = 'required'
     ...

More in documentation