How add a 'Star *' after a django ModelForm CharField?

Question

i have some necessary fields in my django ModelForm. How can i add a red star (*) after the required fields ?

Flanagan

Answer 1

I'm going to assume you want this to happen automatically, so here's one of a few different ways:

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

Then you can style the asterisk using CSS.

Or, you can add the asterisk using CSS instead if you want:

<style type="text/css">
    span.required:after { content: '*'; }
</style>
{% for field in form %}
    <label for="{{ field.auto_id }}">
    {% if field.field.required %}
        <span class="required">{{ field.label_tag }}</span>
    {% else %}
        {{ field.label_tag }}
    {% endif %}
    </label>
{% endfor %}

This one is probably a better option if you want to do other things with the required field as well.

However, if you will not be accessing the fields individually (such as using {{ form.as_p }}), then you can add a property to your ModelForm:

class FooForm(forms.ModelForm):
    required_css_class = 'required'

That will define all fields that are required as having the 'required' class (and thus, you can use the CSS code I mentioned above to add an asterisk (or whatever else you want to do with it).

Macbeth

i'm using {{ form.as_p }} in my template and i can't access required fields in the way you wrote Is there any way to customize a html block after some fields in ModelForm ? – Flanagan

@Kozet: {{ form.as_p }} is fine if you're happy the the HTML that it generates but if you want to modify it then you need to write your own form HTML with each field individually. – Infare

@Kozet: Edited my answer for your situation. – Macbeth

Just one small improvement on this excellent answer: Since you manually write out the label tag, you can use {{field.label }} instead of {{ field.label_tag }} inside the span.required to avoid nesting labels. – Parisparish

Answer 2

You can also use jQuery in order to select the label or append to it.

for example if you have this bootstrap form

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" required="required">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
</form>

Then if you want to add the star to the required fields.

$('input,textarea,select').filter('[required]').parent().parent().find("label").append("*");

Also you may want to specify a class for the required fields labels so you can make them bold or something

$('input,textarea,select').filter('[required]:visible').parent().parent().find("label").addClass("required_label");

Dill