Mark the label of required fields when using Django ModelForm

Question

When using the Django admin forms to create a new or modify an existing object, the <label> tags of mandatory model fields are declared with class attribute required, e.g.

<div>
  <label class="required" for="id_title">Title:</label>
  <input class="vTextField" id="id_title" maxlength="255" name="title" type="text" required />
  <p class="help">A title for this tool</p>
</div>

However, this is not the case when using Django ModelForm. The HTML code produced by the following piece of code in a template file

<table>
{{ toolForm.as_table }}
</table>

comes without any class attributes for the <label> tag that would help to style appropriately labels of fields which are required:

<table>
<tr>
<th>
  <label for="id_title">Title:</label>
</th>
<td>
  <input id="id_title" maxlength="255" name="title" type="text" required />
  <br /><span class="helptext">A title for this tool</span>
</td>
</tr>
</table>

Any ideas how to mark the label of mandatory fields in an efficient way?

See also this similar question for ideas

Ralf
– Ralf

2018-07-16 20:48:52 +00:00
Commented Jul 16, 2018 at 20:48 — Ralf
– Ralf, Commented Jul 16, 2018 at 20:48

gkaravo · Accepted Answer · 2018-07-17 15:05:37Z

Following Ralf's hint for a similar problem as described by xj9 here, the solution below works fine for me:

<table>
{% for field in toolForm %}
  <tr>
    <th>
        <label class="field-label{% if field.field.required %} field-required{% endif %}" for="{{ field.name }}">{{ field.label }}</label>
    </th>
    <td>
        {% if field.errors %}<span class="field-error">{{ field.errors }}</span>{% endif %}
        {{ field }}<br/>
        {% if field.help_text %}<span class="field-helptext">{{ field.help_text|safe }}</span>{% endif %}
    </td>
  </tr>
{% endfor %}
</table>

The corresponding CSS which also adds a '*' sign next to the field names that are required could be the following:

.field-label {
    font-weight: normal;
}
.field-helptext {
    font-size: 12px;
}
.field-error {
    font-size: 14px;
    color: red;
}
.field-required {
    font-weight: bold;
}
.field-required:after {
    content: " *";
}

Daniel Carpenter · Accepted Answer · 2025-08-03 08:25:35Z

0

The Form.required_css_class is applied to the labels of required fields if you set it to a string rather than the default None.

answered Aug 3 at 8:25

Daniel Carpenter

512 bronze badges

Collectives™ on Stack Overflow

Mark the label of required fields when using Django ModelForm

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related