crispy forms + Bootstrap3:输入组插件的错误字段位置错误

时间:2017-11-08 08:16:56

标签: django twitter-bootstrap-3 django-crispy-forms

使用input-group-addon时,如果出现错误,则错误的span元素会被input-group-addon包裹:

enter image description here

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现在是硬编码的...但至少它正在运作。

0 个答案:

没有答案