如何在每個字段下顯示表格錯誤？

Question

我想知道如何在每個字段下顯示表單錯誤。 考慮到我具有登錄表單，如果用戶名有問題，則應在下面顯示特定的錯誤，否則，如果密碼有問題，則應在密碼字段下顯示該錯誤。 我一直在尋找一種合適的方法來做到這一點，這就是我所附帶的：

  <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

養成循環遍歷表單的習慣是一種好習慣，這樣您就可以為所有表單編寫通用模板。 所以我會喜歡

<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>

然后，您可以將該表單包含在模板中，並在表單中添加所需的任何提交/取消按鈕。

Answer 2

嘗試這個 ：）

  <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>