error is not displayed in the template

Question

I have used django allauth for user registration and login. I have used the {{ form.has_errors }} in template to show an error but the error is not displayed in the template. What might be the reason for not showing an error in the template?

The code from allauth login.html(account/login.html)

{% block content %}
<div class="login-box">
      <div class="row">
       <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 login-area">
       <span class="error">
          {% if form.has_errors %}
          <p>Your username and password didn't match. Please try again.</p>
          {% endif %}
      </span>
       <div class="panel panel-default">
         <div class="panel-heading login-header">{% trans "Sign In" %}</div>
         <div class="panel-body">
            <form class="login" method="POST" action="{% url 'account_login' %}">
              {% csrf_token %}
              <div class="form-group form-group-lg">
                <label for="emailAddress">Email address</label>
                <input type="email" class="form-control" id="emailAddress id_login" name="login" placeholder="Email">
              </div>
               <div class="form-group form-group-lg">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password id_password" name="password" placeholder="Password">
              </div>
              <div class="form-group">
                {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                {% endif %}
              </div>
              <button class="btn-block signin-btn btn-sm btn-primary pull-right m-t-n-xs" type="submit">{% trans "Sign In" %}</button>
            </form>
             </div>
             <div class="panel-footer">
                <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
             </div>
         </div>
      </div>
    </div>
</div>
{% endblock %}

Answer 1

Try this one. Errors raised by the form which is not attached to field are stored in non_field_errors

 {% if form.non_field_errors %}
          <ul class='form-errors'>
              {% for error in form.non_field_errors %}
                  <li>{{ error }}</li>
              {% endfor %}
          </ul>
  {% endif %}

or if you want to display in your way try this one

{% if form.errors %}
          <p>Your username and password didn't match. Please try again.</p>
{% endif %}