Как отобразить сообщение об ошибке в формах Django?

Я хотел бы настроить форму аутентификации входа в Django. Оригинальная форма выглядит следующим образом, и она прекрасно работает:

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4 ">Log In</legend>   
            {{ form|crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">Login</button>
        </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
        </small>
    </div>
</div>
{% endblock content %}

Моя цель - изменить стиль формы так, чтобы я мог размещать объекты там, где захочу. Я смог добиться этого для полей имени пользователя и пароля, однако я не могу отобразить сообщение об ошибке, как в оригинальном формате.

Вот что я пробовал:

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4 ">Log In</legend>
            {% if formset.non_form_errors %}
            <div class="alert alert-block alert-danger">
                {% if formset_error_title %}<h4 class="alert-heading">{{ formset_error_title }}</h4>{% endif %}
                <ul class="m-0">
                    {{ formset.non_form_errors|unordered_list }}
                </ul>
            </div>
            {% endif %}
            <div class="row">
                <div class="col-md-4 col-sm-12 register-field">
                    {{ form.username|as_crispy_field }}
                </div>
                <div class="col-sm-12 register-field">
                    {{ form.password|as_crispy_field }}
                </div>
            </div>
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">Login</button>
        </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
        </small>
    </div>
</div>
{% endblock content %}

В основном я видел, что crispy использует объект под названием formset.non_form_errors однако похоже, что он не работает, когда я вставляю неверное имя пользователя/пароль.

Не могли бы вы предложить умный и элегантный способ достижения моей цели? Вот как это должно выглядеть:

enter image description here

Я смог достичь своей цели с помощью этого трюка:

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4 ">Log In</legend>
            <div class="row">
                <!-- Added this new rows -->
                {% if form.errors %}
                <div class="col-12 register-field">
                    <div class="alert alert-block alert-danger">
                        <ul>
                            <li>Please enter a correct username and password. Note that both fields may be
                                case-sensitive.
                            </li>
                        </ul>
                    </div>
                </div>
                {% endif %}
                <!-- ------------------- -->
                <div class="col-md-4 col-sm-12 register-field">
                    {{ form.username|as_crispy_field }}
                </div>
                <div class="col-sm-12 register-field">
                    {{ form.password|as_crispy_field }}
                </div>
            </div>
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">Login</button>
        </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
        </small>
    </div>
</div>
{% endblock content %}

В основном я проверяю, есть ли ошибки, а затем создаю div с пользовательским сообщением об ошибке.

Вернуться на верх