Django表单错误文本无法高亮，如何实现错误内容红色高亮？

检查表单内容时，期望正确内容显示为绿色，错误内容显示为红色，但当前仅能显示错误提示消息，错误文本并未被红色高亮，多次修改无效，如何实现错误文本的高亮效果？

相关代码 #

view.py #

@login_required
@permission_required("service.add_post")
def create_post(req):
    form = PostForm()
    if req.method == "POST":
        form = PostForm(req.POST)
        if form.is_valid():
            form.save()
            title = form.cleaned_data.get("title")
            if title != "POST":
                messages.error(req, f"Something went wrong")
                return redirect('index')
            # id = form.cleaned_data.get("pk")
            messages.success(req, f"Post {title} was created successfully")
            return redirect('index')
    return render(req, "create_post.html", {"form":form})

create_post.html #

{% extends "index.html" %}

{% block content %}
<h1>Create Post</h1>
   <form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
 {{ form.as_p }}
 <button class="btn btn-primary">Create New Post</button>

当前状态：已多次修改但无效果，错误提示仅显示消息，字段文本未高亮：

解决方案 #

Django表单默认不会自动给错误字段添加颜色高亮，需要手动处理表单渲染和样式：

1. 手动渲染表单字段（替换form.as_p） #

放弃自动渲染，遍历表单字段，给错误字段标记特殊类：

{% extends "index.html" %}

{% block content %}
<h1>Create Post</h1>
<form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {% for field in form %}
        <div class="form-group {% if field.errors %}has-error{% endif %}">
            {{ field.label_tag }}
            {{ field }}
            {% if field.errors %}
                <div class="text-danger">
                    {% for error in field.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    {% endfor %}
    <button class="btn btn-primary">Create New Post</button>
</form>
{% endblock %}

2. 添加CSS样式 #

在模板头部或全局CSS文件中添加样式，实现高亮：

/* 错误字段及文本高亮 */
.has-error input, .has-error textarea {
    border-color: #dc3545;
    color: #dc3545;
}
.has-error .text-danger {
    color: #dc3545;
}

/* 正确内容高亮（可选） */
.form-control.is-valid {
    border-color: #28a745;
    color: #28a745;
}

3. 处理messages提示的高亮 #

你代码中title != "POST"的错误是通过messages展示的，要高亮这类提示，需在模板中渲染messages时添加样式：

<!-- 在base模板或当前模板的合适位置添加 -->
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

如果用Bootstrap，alert-danger会自动将错误提示设为红色，alert-success设为绿色。

内容的提问来源于stack exchange，提问作者Eva Smirnova