css - BootstrapでDjango検証エラーをどのようにスタイリングする必要がありますか？

Question

Djangoのフォームに検証エラーがある場合、エラーはクラスのリストに表示されerrorlistます。

を設定することにより、Bootstrapで要素にエラースタイルを与えることができますclass="alert alert-error"。

これらを組み合わせて、Djangoフォームの検証エラーにBootstrapのエラースタイルを使用するための最良の方法は何ですか？

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 では、input 要素が「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

これは、次のようなマルチ ウィジェットでは機能しません。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 %}

これはマルチ ウィジェットのように機能しますが、1 つのフィールドが呼び出され、他のフィールドがDateSelectorWidgetstartstart_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 %}