当前位置: 首页 > 知识库问答 >
问题:

Django Crispy表单-未显示复选框

淳于祺
2023-03-14

我试图在我的表单上添加一个布尔字段,并用crispyforms标记呈现它。除复选框外,所有内容都显示出来。

我的项目使用django 2.1、python 3.6和Bootstrap-4。我的Django Crispy Forms版本是:1.7。2.

领域为<码>投资。

模型字段不工作:

investment=模型。BooleanField(默认值=False,help_text='Want to accept Investments?')My form:

class CreateProjectForm(forms.ModelForm):
    class Meta:
        model = Project
        fields = ('name', 'short_description', 'category', 'investment')
        widgets = {
            'name': forms.TextInput(attrs={'placeholder': 'enter the project name here...'}),
            'short_description': forms.Textarea(attrs={'rows': '2', 'maxlength': '135', 'class': 'textarea-limited',
                                                        'placeholder': 'enter a short description of your project limited to 135 characters'}),
        }

    def __init__(self, *args, **kwargs):
        # first call parent's constructor
        super(CreateProjectForm, self).__init__(*args, **kwargs)
        # there's a `fields` property now
        self.fields['investment'].required = True
        self.fields['investment'].widget = forms.CheckboxInput()
        self.fields['name'].widget = forms.TextInput(
            attrs={'placeholder': 'enter the project name here...'})
        self.fields['short_description'].widget = forms.Textarea(
            attrs={'rows': '2',
                   'maxlength': '135',
                   'class': 'textarea-limited',
                   'placeholder': 'enter a short description of your project limited to 135 characters'})
        # evade all labels and help text to appear when using "as_crispy_tag"
        self.helper = FormHelper(self)
        self.helper.form_show_labels = False
        self.helper._help_text_inline = True

我的观点:

class ProjectCreateView(SuccessMessageMixin, generic.CreateView):
    template_name = 'webplatform/project_create_form.html'
    model = Project
    form_class = CreateProjectForm
    success_message = 'Project created! Now try to add all the details and then publish it!'

    def get_success_url(self):
        return reverse_lazy('project-edit-general', args=(self.object.id,))

    # Set field as current user
    def form_valid(self, form):
        form.instance.user = self.request.user
        form.instance.start_date = timezone.now()
        form.instance.history_change_reason = 'Project Created'
        return super(ProjectCreateView, self).form_valid(form)

对于模板,我尝试了两种方法,但都不起作用:

我的模板01:

这是我想在最后使用的方法。单独显示每个恶魔,以便我可以直接在模板上进行布局。

...
{% load crispy_forms_tags %}
...
<form id="my_form" method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-5 col-sm-5">
                            <h6>Name
                                <span class="icon-danger">*</span>
                            </h6>
                            {{ form.name|as_crispy_field }}

                            <h6>Categories
                                <span class="icon-danger">*</span>
                            </h6>
                            {{ form.category|as_crispy_field }}

                        </div>
                        <div class="col-md-7 col-sm-7">
                            <h6>Short Description
                                <span class="icon-danger">*</span>
                            </h6>
                            {{ form.short_description|as_crispy_field }}
                            <h5>
                                <small>
                                    <span id="textarea-limited-message" class="pull-right">135 characters left</span>
                                </small>
                            </h5>
                            <h6>Investment
                                <span class="icon-danger">*</span>
                            </h6>
                            {{ form.investment|as_crispy_field }}
                        </div>
                    </div>
                    <div class="row buttons-row">
                        <div class="col-md-4 col-sm-4">
                            <button type="submit" class="btn btn-outline-primary btn-block btn-round">Create</button>
                        </div>
                    </div>
                </form>

我的模板02:

这一个直接使用{form | crispy}}自动显示所有元素。

...
{% load crispy_forms_tags %}
...
<form id="my_form" method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    {{ form|crispy }}
                    <div class="row buttons-row">
                        <div class="col-md-4 col-sm-4">
                            <button type="submit" class="btn btn-outline-primary btn-block btn-round">Create</button>
                        </div>
                    </div>
                </form>

我检查了渲染的超文本标记语言,我发现问题似乎在哪里,但我不知道如何解决它:

Crispy表单创建一个元素,添加相应的div和其他必要的元素,例如在名称输入上:

<div id="div_id_name" class="form-group"> 
        <label for="id_name" class="col-form-label  requiredField">Name
            <span class="asteriskField">*</span> 
        </label> 
    <div class=""> 
        <input type="text" name="name" placeholder="enter the project name here..." class="textinput textInput form-control" required="" id="id_name"> 
            <small id="hint_id_name" class="form-text text-muted">Add a title to your project.</small> 
    </div> 
</div>

但复选框创建以下结构:

<div class="form-group"> 
    <div id="div_id_investment" class="form-check"> 
        <label for="id_investment" class="form-check-label requiredField"> 
            <input type="checkbox" name="investment" class="checkboxinput form-check-input" required="" id="id_investment">
                    Investment
                <span class="asteriskField">*</span> 
        </label> 
        <small id="hint_id_investment" class="form-text text-muted">Want to accept Investments?</small> 
    </div> 
</div>

如您所见,带有iddiv位于另一个div中。那么,如果我删除这个额外的divformgroup)的类,并用id更改div的类:formcheck,对于formgroup,复选框就会出现,并且功能完全正常。

所以我的想法是尝试更改crispy表单为复选框创建的模板,但我不知道如何做到这一点。另外,如果还有更好的选择,我愿意接受。

共有3个答案

乜昆
2023-03-14

我可以通过使用以下JS的元素对此进行半破解:

$(window).on('load',function(){
        $('#div_id_investment').addClass('form-group').removeClass('form-check');
});

但这只是让用户看到复选框并与之交互,并不能解决如果该字段是必需的,而您没有单击它,则不会显示错误消息的问题。

如果任何人有一个改进的JS,使所有的复选框,并解决了错误消息的问题,我将不胜感激。

注意:我没有将此标记为问题的有效答案,因为错误仍然存在,这个“黑客”并不能解决所有问题。

巴宏恺
2023-03-14

他们是一个开放的问题在django脆皮形式github见:https://github.com/django-crispy-forms/django-crispy-forms/issues/787

根据这一点,问题是引导程序在最后一个版本中处理这个表单元素的方式。这里是一个js黑客使其工作:

$(document).ready(function() {
    $( ":checkbox" ).each(function( index ) {
        $(this).prependTo($("#div_" + $(this).attr('id')))
    });
});
越琦
2023-03-14

尝试更改self.fields['投资']。必需=假,因为似乎因为字段没有指定为可选Django忽略它。

 类似资料:
  • 我尝试将CheckBoxTableCell添加到我的TableColumn中,但是无论值是真还是假,单元格都只显示未选中的框 我的对象 我如何声明该表 我已经通过使用布尔属性类型创建一个新变量并使用新变量更改 PropertyValueFactory 参数解决了这个问题 ,问题是我不想使用布尔属性或属性 ,因为我的所有模型类仍然使用标准类型而不是属性 有办法做到这一点吗? 如果没有,也许我只是将所

  • 此表单在基于函数的视图中显示单选按钮,但在我引入基于类的视图时更改为复选框,有什么解决办法。我希望他们再次显示单选按钮 表单.py models.py 模板 views.py

  • 显示选单 按下按钮开启选单后,会显示目前开启之Web网页的标题、地址等信息。此外,尚可透过选单列进行各种操作或设定。每次按下按钮,都会在显示/隐藏选单间互换。 (1) 地址列 (2) 标题栏 (3) 浏览接口安全性图标 仅于利用网络过滤服务时显示。 (4) SSL图示 仅于开启SSL网页时显示。 (5) 选单列 进行操作或调整设定。 (6) 忙碌图示 仅于正加载网页时显示。 使用选单 档案 输入地

  • 主要内容:<h:selectBooleanCheckbox>单个复选框,硬编码复选框,由数组生成的复选框,由映射生成的复选框,复选框多个复选项以下部分显示如何使用JSF标签创建HTML复选框。标签呈现类型为“”的HTML输入元素。 以下JSF标签 - 被渲染成为以下HTML标签。 标签呈现一组类型为“”的HTML输入元素,并使用HTML表格和标签标签进行格式化。 JSF中的以下标签 - 被渲染成为以下HTML标签。 单个复选框 以下是文件: 中的代码,它使用创建一个复选框 - 以下是文件: 中的

  • 我有一个带有自定义适配器的 GridView,当我从列表中选择一个项目时,选择器会显示一秒钟并消失。我猜自定义适配器会导致它,我尝试使用它和选择器,但无济于事。 下面是我的适配器(基于“Hello,Views”中的网格视图示例): 布局是这样的: 谢谢你的帮助。 下面是GridView的一个截图(现在,所有的条目都有相同的图片)。我想在选中的图像周围画一个某种颜色的框,但是我得到一个橙色的矩形,一

  • 我有以下问题:我有沙箱中的代码,我想显示一个按钮,如果复选框被选中,最大数量大于1。最大数量条件不是问题,而是复选框的问题。我不知道如何获得特定复选框的“选中”值。我认为我不能对索引做任何事情,因为索引值在映射optionModules时被多次使用。预先感谢你的帮助。沙盒链接:https://codesandbox.io/s/nostalgic-germain-e18wh