为Django widget-tweaks的外层div添加错误类

我来帮你搞定这个需求！要把Bootstrap的has-error类加到外层的<div class="form-group">上（而不是input标签），咱们可以结合Django表单字段的errors属性和django-widget-tweaks的语法来实现，具体代码如下：

<div class="form-group{% if form.title.errors %} has-error{% endif %}">
    <label class="control-label" for="id_title">Title</label>
    {% render_field form.title|add_class:"form-control" %}
    {% if form.title.errors %}
        <span class="help-block">{{ form.title.errors.0 }}</span>
    {% endif %}
</div>

代码解释： #

• 通过{% if form.title.errors %}判断当前字段是否存在验证错误，如果有错误，就给div追加has-error类，完全符合你想要的效果。
• 额外加入了错误信息的显示（用Bootstrap的help-block类），这能让用户清晰看到错误原因，提升体验；如果不需要这个提示，可以直接删掉对应的代码块。

进阶：复用模板片段（推荐） #

如果你的表单有很多字段，重复写上面的代码会很繁琐。可以把这个逻辑封装成一个可复用的模板片段，比如创建templates/form_field.html：

<div class="form-group{% if field.errors %} has-error{% endif %}">
    <label class="control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
    {% render_field field|add_class:"form-control" %}
    {% if field.errors %}
        <span class="help-block">{{ field.errors.0 }}</span>
    {% endif %}
</div>

然后在主模板中这样调用：

{% include "form_field.html" with field=form.title %}
{% include "form_field.html" with field=form.content %}
<!-- 其他字段同理 -->

这样不仅减少了重复代码，后续修改样式逻辑也只需要改一处，维护起来更高效。

内容的提问来源于stack exchange，提问作者Pankaj Sharma