Make sure that field errors are always visible (#767)

Bootstrap sets `display: none` unless the error comes after an invalid
field. Fixes #763 and potentially #749

see #763 (comment)

Author: xi

src/django_bootstrap5/templates/django_bootstrap5/field_errors.html

@@ -1,7 +1,7 @@
 {% if field_errors %}
-    <div id="{{ field.auto_id }}_error">
+    <div id="{{ field.auto_id }}_error" class="w-100">
         {% for text in field_errors %}
-            <div class="invalid-feedback">{{ text }}</div>
+            <div class="invalid-feedback d-block">{{ text }}</div>
         {% endfor %}
     </div>
 {% endif %}

tests/test_bootstrap_field_input_checkbox.py

@@ -39,8 +39,8 @@ def test_input_type_checkbox_is_invalid(self):
                 '<div class="form-check">'
                 '<input class="form-check-input is-invalid" id="id_test" name="test" required type="checkbox">'
                 '<label class="form-check-label" for="id_test">Test</label>'
-                '<div id="id_test_error">'
-                '<div class="invalid-feedback">This field is required.</div>'
+                '<div id="id_test_error" class="w-100">'
+                '<div class="invalid-feedback d-block">This field is required.</div>'
                 "</div>"
                 "</div>"
                 "</div>"

tests/test_bootstrap_field_input_text.py

@@ -43,8 +43,8 @@ def test_input_type_text(self):
                 '<label class="form-label" for="id_test">Test</label>'
                 '<input type="text" name="test"'
                 ' class="form-control is-invalid" placeholder="Test" required id="id_test">'
-                '<div id="id_test_error">'
-                '<div class="invalid-feedback">This field is required.</div>'
+                '<div id="id_test_error" class="w-100">'
+                '<div class="invalid-feedback d-block">This field is required.</div>'
                 "</div>"
                 "</div>"
             ),
@@ -201,8 +201,8 @@ def test_input_validation_failure(self):
                 '<span class="input-group-text">foo</span>'
                 '<input type="text" name="test" minlength="1" class="form-control'
                 ' is-invalid" placeholder="Test" required id="id_test">'
-                '<div id="id_test_error">'
-                '<div class="invalid-feedback">This field is required.</div>'
+                '<div id="id_test_error" class="w-100">'
+                '<div class="invalid-feedback d-block">This field is required.</div>'
                 "</div>"
                 "</div>"
                 "</div>"