css - 我应该如何使用 Bootstrap 设置 Django 验证错误的样式？

Question

当 Django 中的表单出现验证错误时，错误会在带有 class 的列表中给出errorlist。

Bootstrap 可以通过设置为元素赋予错误样式class="alert alert-error"。

将这些结合起来并使用 Bootstrap 的错误样式验证 Django 表单上的错误的最佳方法是什么？

Answer 1

在 Twitter Bootstrap 中，输入元素包含在"control-group" div或之间fieldset。所以我会在模板中做这样的事情

{%for field in form %}
<div class="control-group {%if field.errors %}error{%endif%}">
{# render your field #}
</div>
{% endfor %}

注意：在引导程序中，class="alert alert-error"似乎是针对警报消息而不是针对特定字段的错误。

Answer 2

在 Bootstrap 3 中，输入元素包含在“form-group”div 之间，并且错误类已更改为 has-error。

{%for field in form %}
  <div class="form-group {%if field.errors %}has-error{%endif%}">
    {# render your field #}
  </div>
{% endfor %}

Answer 3

已经定型了！:)

• https://github.com/maraujop/django-crispy-forms/
• https://github.com/earle/django-bootstrap

这些库充当表单的包装器，并添加在 Django Bootstrap 中使用的相关类名，以便您拥有开箱即用的基本样式（默认引导程序）

Answer 4

Bootstrap 4 Django 解决方案

如果<form class="was-validated>"在您的回复中返回验证，这将适用于您：

此示例适用于admin/change_form.html，但很容易通过更改将其转换为您的表单adminform.form

这不适用于 Multi 小部件，例如DateSelectorWidget

删除class="was-validated"

{% if adminform.form.errors %} {# Delete this if you always want active validations #}
  <script type="text/javascript">
    {% for field in adminform.form %}
      var field_input = document.getElementById("{{ field.auto_id }}");
      if (field_input) {
        field_input.classList.add("is-{% if field.errors %}in{% endif %}valid");
      }
    {% endfor %}
  </script>
{% endif %}

这适用于 Multi 小部件，DateSelectorWidget但如果调用一个字段并且startstart_time 赞赏其他改进，则可能会引入问题

{% if adminform.form.errors %} {# Delete this if you always want to see a validation #}
<script type="text/javascript">
  {% for field in adminform.form %}
    var field_input = document.getElementById("{{ field.auto_id }}");
    if (field_input) {
      field_input.classList.add("is-{% if field.errors %}in{% endif %}valid");
    } else {
      multi_widget_fields = document.querySelectorAll('[id^="{{ field.auto_id }}_"]')
      multi_widget_fields.forEach(function (element) {
        element.classList.add("is-{% if field.errors %}in{% endif %}valid");
      });
    }
  {% endfor %}
</script>
{% endif %}