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。虽然required_css_class = 'required'

中有form，但它已丢失

1. 所有fields最初都以红色标出（表示错误）。只有在form fields。

中出现错误时，该框才会亮起红色

2. 使用label

覆盖表单中指定内容form fields中template label attribute的可能方式

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'

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

在下面的图像中显示了所呈现代码的结果