html - django 表格 : styling widget when field is required or has an error

Question

我正在创建一个 Django 表单，当出现错误或需要该字段时(例如:突出显示该字段的框)，我似乎无法访问每个字段的小部件以设置不同的样式。

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;       
}

我一直在使用#id_fieldname 访问小部件并设置其样式，但我尝试了以下方法但没有成功:

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

提前致谢!

Answer 1

您可以在容器中添加一个“必需”类 <div> :

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

使用 Django 表单方法 form.as_p , form.as_ul , form.as_table ，如果您在表单中为必填字段声明特定的 css 类，这将自动完成，例如:

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

更多信息 documentation