Django 表单验证错误未通过 Bootstrap 警报警报危险样式显示

Question

我正在开发一个 Django 项目，其中使用 Bootstrap 来设置表单验证错误消息的样式。然而，虽然表单验证有效（我可以看到纯文本中的错误），但这些错误并未使用 Bootstrap 中的警报警报危险类进行样式设置。我已经确认 Bootstrap 已正确包含，但错误消息仍然显示为无样式。

这是我的表单模板中的相关代码：

<section class="gallery" style="margin-left: 5em">
    <form action="{% url 'register' %}" method="POST">
        {% csrf_token %}
        <div class="row">
            {% for field in form.visible_fields %}
            <div class="col-12 col-lg-12" style="margin-bottom: 10px;">
                <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">{{ field.label }}</label>
                {{ field }}
                
                {% for error in field.errors %}
                <div class="alert alert-danger" style="margin-top: 5px;">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
        <div>
            <button type="submit" class="btn btn-success col-12" style="padding-top: 5px;">Register</button>
        </div>
    </form>
</section>

这是我迄今为止尝试过的：

1. Bootstrap 包含：我在 HTML 文件中包含了以下链接，以确保加载 Bootstrap：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

我通过检查网络选项卡并查看文件的获取没有错误来确认 Bootstrap 正在加载。

2. 表单验证：我的表单正确验证字段，当我使用 {{ field.errors }} 将它们输出为纯文本时，我可以看到错误。

3. 测试错误：我在表单的 clean 方法中添加了一个测试错误，以确保验证正在发生：

def clean_password2(self):
        password1 = self.cleaned_data.get('password1')
        password2 = self.cleaned_data.get('password2')

        if password1 and password2:
            if password1 != password2:
                raise forms.ValidationError('Passwords do not match')
            else:
                return password2

4. 浏览器开发者工具：我检查了浏览器的控制台，没有 JavaScript 或 CSS 错误。

我的问题： 为什么错误消息没有由 Bootstrap 中的警报警报危险类设置样式？是否有什么东西会干扰 Bootstrap 样式的渲染，或者我的表单模板中是否缺少某些内容？

Answer 1

bootstrap5 是否加载到您的模板中？您的按钮是否采用引导按钮类设计？如果是，则错误可能与警报类本身有关。是你写的

根据文档，您需要将

role="alert"

包含在您的

div

中。