How can I display the form errors under each field?

Question

I was wondering how can I display the form errors under each field. Considering I have the log in form, if there is a problem with username, then the specific errors should be displayed under, otherwise if there is a problem with the password, the error should be displayed under the password field. I have been searching for a proper way to do it, this is what I came with:

  <div class="jumbotron">
                    <form class="login" method="POST">
                        {% csrf_token %}
                        <h4>Log In</h4>
                        <p class="field">{{ form.username }}</p>
                        <p class="field">{{ form.password }}</p>
                        <button class="btn btn-default" type="submit">Log In</button>
                        {% if form.errors %}
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <div class="alert alert-danger">
                                        <strong>{{ error|escape }}</strong>
                                    </div>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                                <div class="alert alert-danger">
                                    <strong>{{ error|escape }}</strong>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </form>
                </div>

Answer 1

It's good practice to get into the habit of looping over forms so that you can write generic templates for all forms. So I'd so something like;

<div class="jumbotron">
    <form class="login" method="POST">
        {% csrf_token %}

        <h4>Log In</h4>

        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                <div class="alert alert-danger">
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endif %}

        {% for hidden in form.hidden_fields %}
            {{ hidden }}
        {% endfor %}

        {% for field in form.visible_fields %}
            {{ field.label_tag }}
            <p class="field">{{ field }}</p>
            {% if field.help_text %}
                <p class="help">{{ field.help_text }}</p>
            {% endif %}
            {% if field.errors %}
                {{ field.errors }} {# outputs a UL with class 'errorlist' #}
            {% endif %}
        {% endfor %}

        <button class="btn btn-default" type="submit">Log In</button>

    </form>
</div>

You could then include that form in a template & include it with whatever submit/cancel buttons you wanted.

Answer 2

Try this :)

 <div class="jumbotron">
                    <form class="login" method="POST">
                        {% csrf_token %}
                        <h4>Log In</h4>
                        <p class="field">{{ form.username }}
                        {{ form.username.errors }}
                        </p>
                        <p class="field">{{ form.password }}
                        {{ form.password.errors }}
                        </p>
                        <button class="btn btn-default" type="submit">Log In</button>
                    </form>
                </div>