FEATURE REQUEST: Implement required class on field's label

[DanielSwain]

In this issue you've implemented add_required_class on fields. This functionality seems to be of limited use because it simply duplicates the required attribute that is in the HTML, and styling of the input element (<input>, <textarea>, etc.) could be done in CSS by selecting on [required] rather than by the class added for required fields. Also, adding a required-type class adds to the size of the HTML unnecessarily. What would be most useful would be to have add_required_class work on labels, e.g., {{ field.label_tag|add_required_class:"is-required" }}. I don't know if that would be possible since label_tag returns a string. The simplest practice to indicate a required field is to put an asterisk after the label of the required field (by selecting using CSS and then using the ::after CSS functionality), but it seems impossible since the label comes BEFORE the field in the HTML (it would be simple if the label came AFTER the field in the HTML). If this feature request is implemented, then {% render_field field %} should also render the WIDGET_REQUIRED_CLASS on the field's label. Thanks for your consideration.

[zodman]

@DanielSwain this works for you ?

https://www.djangosnippets.org/snippets/474/

{% for field in form %}
    <div>
        <label for="{{ field.label }}">{{ field.label_tag }}
        {% if field.field.required %}<span class="special_class">*</span>{% endif %}</label>
        {{ field }}
    </div>
{% endfor %}

[DanielSwain]

Thanks @zodman. Don't know why I couldn't think of that, but you got me on the right track. Here's what I ended up with (had to use id_for_label on the for= and just placed the asterisk with CSS rather than placing with <span> [results in less HTML plus my Bootstrap _reboot.scss file has <label> defined as display:inline-block, so the span was wrapping to another line below the label and I didn't want to override that scss]):

<label for="{{ field.id_for_label }}" {% if field.field.required %}class="is-required"{% endif %}>{{ field.label }}</label>


label.is-required::after {
	content: "*";
	color: red;
	margin-left: 3px;
}

label[for$="wagtailcaptcha"]::after {
	display: none;
}

I still think what I've suggested would be a useful feature, so I'll let this issue for you to close if the feature request is either rejected or implemented at some point. Thank you again.