使用input-group-addon
时,如果出现错误,则错误的span
元素会被input-group-addon
包裹:
html:
<div class="controls col-md-6 input-group">
<input name="name" value="English" class="lang_name dropdown-toggle dropdowntogglewidget form-control form-control-danger" maxlength="40" required="" id="id_name" type="text">
<span role="button" class=" input-group-addon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span></span>
<span id="error_1_id_name" class="help-block"><strong>Languages with this Name already exists.</strong></span>
</div>
my forms.py:
class LanguagesForm(forms.ModelForm):
...
def __init__(self, *args, **kwargs):
super(LanguagesForm, self).__init__(*args,**kwargs)
self.helper = FormHelper()
self.helper.form_class = 'form-horizontal text_detail'
self.helper.label_class = 'col-md-3'
self.helper.field_class = 'col-md-6 input-group'
...
我认为它与Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate的问题相同,但在这里,我们的选择较少......
A&#34;解决方案&#34;,hackish as hell:
覆盖templates/bootstrap3/field.html
forms.py
中的:
def __init__(self, *args, **kwargs):
...
self.helper.field_template = 'custom_bootstrap_field.html'
将myproject/templates
文件放入custom_bootstrap_field.html
内,修改:
{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
{% if field|is_checkbox and form_show_labels %}
<label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
{% crispy_field field %}
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
{% else %}
<!-- I CHANGED THIS -->
<div class="controls {{ field_class }}">
{% crispy_field field %}
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
</div>
<!-- -->
{% endif %}
由:
{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
{% if field|is_checkbox and form_show_labels %}
<label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
{% crispy_field field %}
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
{% else %}
<!-- BY THIS -->
<div class="controls {{ field_class }}">
{% crispy_field field %}
</div>
<p class="col-md-offset-3">
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
</p>
<!-- -->
{% endif %}
offset
现在是硬编码的...但至少它正在运作。