django-bootstrap3 如何获取在模板中工作的必需和错误类

Question

在我的注册表中我有：

    class RegistrationForm(forms.Form):
        required_css_class = 'required'
        error_css_class='error'


        username = forms.RegexField(regex=r'^[\w.@+-]+$',
                                    max_length=30,
                                    label=_("Username"),
                                    error_messages={'invalid': _("This value may contain only letters, numbers and @/./+/-/_ characters.")})
        email = forms.EmailField(label=_("E-mail"))
        password1 = forms.CharField(widget=forms.PasswordInput,
                                    label=_("Password"))
        password2 = forms.CharField(widget=forms.PasswordInput,
                                    label=_("Password (again)"))

        first_name=forms.RegexField(regex=r'^[\w.@+-]+$',
                                    max_length=30,
                                    label=_("first name"),
                                    error_messages={'invalid': _("This value may contain only letters, numbers and @/./+/-/_ characters.")})
        last_name=forms.RegexField(regex=r'^[\w.@+-]+$',
                                    max_length=30,
                                    label=_("last name"),
                                    error_messages={'invalid': _("This value may contain only letters, numbers and @/./+/-/_ characters.")})

.................

在我使用 django-bootstrap3 的模板中：

{% extends "registration/base.html" %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts }
{% bootstrap_messages %}


{% block title %}Registration{% endblock %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-sm-10">
      <h1>Sign up</h1>
      <p>Already registered?
        <a href="{% url 'django.contrib.auth.views.login' %}">Sign in here.</a></p>
    </div>
  </div>

  <form action="{% url 'registration_register' %}"
        method="post" role="form" class="form-horizontal">
    {% csrf_token %}
  <div class="form-group has-error">
    {% bootstrap_form form layout='horizontal' %}

    {% buttons %}
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">
        {% bootstrap_icon "star" %} Sign Me Up!
      </button>
    </div>
   </div>
    {% endbuttons %}
  </form>

</div>
{% endblock %}

我附上registration form 的快照： 我要解决的三件事： 1.required field没有*。尽管我在form 中有required_css_class = 'required'，但它丢失了

1. 所有fields 最初都用红色框起来（表示错误）。仅当form fields 出现错误时，该框才会亮起红色。

2. 使用label attribute 在表单中分配的内容覆盖template 中form fields 的label 的可能方法

Answer 1

您已将表单包装在 form-group has-error 类表单中，然后您的字段始终呈现为有错误的字段。您可以安全地删除此 div 标签，因为 bootstrap_form 标签会自动在您的字段周围添加 form-group 类 div。

<form action="{% url 'registration_register' %}"
        method="post" role="form" class="form-horizontal">
    {% csrf_token %}
    {% bootstrap_form form layout='horizontal' %}
    {% buttons %}
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">
                {% bootstrap_icon "star" %} Sign Me Up!
            </button>
        </div>
    {% endbuttons %}
</form>

如果您避免使用 bootstrap_form 标记并为每个字段使用单独的渲染器，则可以为您的字段生成自定义标签

<form action="" method="post" role="form" class="form-horizontal">{% csrf_token %}
    {% for field in form %}
        <div class="form-group{% if field.field.required %} required{% endif %}">
            <div class="col-md-2 control-label">
                {% bootstrap_label 'your custom label' %}
            </div>
            <div class="col-md-4">
                {% bootstrap_field field show_label=False form_group_class=None %}
            </div>
        </div>
   {% endfor %}
   {% buttons %}
      <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">
                {% bootstrap_icon "star" %} Sign Me Up!
            </button>
       </div>
   {% endbuttons %}
</form>

最后，也许你在必填字段旁边看不到 *，因为你没有正确设置你的 css：

.form-group.required .control-label:after {
    content:"*";
    color:red;
}

我还从您的RegistrationForm 课程中删除了这一行

error_css_class = 'error'

我已将表单的最后两个字段设置为可选字段，仅用于测试显示的代码。

下面是显示代码结果的图像