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

（錯誤的指示）所有fields最初盒裝爲紅色。只有在form fields中出現錯誤時，該盒子纔會點亮爲紅色。

可能的方式來覆蓋的form fields在template從什麼形式分配label使用label attribute

Answer 1

你包裹在一個form-group has-error類表格形式，然後你的領域總是呈現爲帶有錯誤的字段。您可以安全地刪除此div標籤，因爲bootstrap_form標籤會自動在您的字段中添加一個form-group class 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> 

最後，也許你看不到所需的字段旁邊一個*，因爲你不「T正確設置你的CSS：

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

我也從RegistrationForm類線上剔除

error_css_class = 'error' 

和我已經設置爲可選的表單的最後兩個字段只是爲了測試代碼。

在下面，顯示所呈現的代碼

的結果的圖像