如何在不刷新页面的情况下使用 django-crispy-Forms 实现引导模态表单

Question

我一直在尝试使用django-crispy表单在引导模式中实现一个表单。我正在使用基于类的视图。我知道我需要一些Ajax，但我不理解我所看到的所有例子。 我尝试了django-bootstrap-modal-forms- 这适用于模态，但遗憾的是，它不支持引导样式，我找不到任何添加它的方法。当我尝试使用bootstraps formclass，form-control将bootstrap sytling添加到django-bootstrap-modal-forms时，表单没有提交，并且没有给出任何错误。 所以现在，我想回到django-crispy-form

。所以我的问题是：

1. 如何使用django-crispy-form实现引导模态表单

2. 如何使用 ajax 实现验证，以避免页面重新加载 - 错误也应该具有与django-crispy-forms相同的错误样式

   3. 另外，当对象成功添加到数据库中时，我还如何使用警报实现成功消息。

我的代码如下所示：

my_template.html这目前包含django-bootstrap-modal-forms的 CSS 类。 查看 https://pypi.org/project/django-bootstrap-modal-forms/
您可以将模态正文中的文本替换为{{ form | crispy }}以使用django-crispy-forms

<form method="post" action="">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title">Create new Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{% for field in form %}
<div class="form-group{% if field.errors %} invalid{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{% for error in field.errors %}
<p class="help-block invalid-feedback"><strong>{{ error }}</strong></p>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="submit-btn btn btn-primary">Add Task</button>
</div>
</form>

JavaScript

$(document).ready(function() {
$(".create-task").modalForm({
formURL: "{% url 'create_task' %}"
});
});

forms.py

from .models import Task, Categories
from bootstrap_datepicker_plus import DateTimePickerInput
from django import forms
from django.db.models import Q
from bootstrap_modal_forms.forms import BSModalForm
from django.contrib.auth import get_user_model
class TaskForm(BSModalForm):
# Get al the categories from the database
categories_queryset = Categories.objects.all()
task_title = forms.CharField(max_length=100)
task_description = forms.CharField(widget=forms.Textarea)        
due_date = forms.DateTimeField(
widget = DateTimePickerInput(format='%Y-%m-%d %H:%M')
)    
is_completed = forms.BooleanField()
categories = forms.ModelChoiceField(categories_queryset, empty_label="---None---")
#parent = forms.ModelChoiceField()
#task_title.widget.attrs.update({'class': 'form-control'})

class Meta:
model = Task
fields = ['task_title', 'task_description', 'due_date', 'is_completed', 'categories', 'parent']
def __init__(self, *args, **kwargs):
super(TaskForm, self).__init__(*args, **kwargs)
# I have errors using the Queryset to find entities with Categories.user_id == null, and Categories.user_id=get_user_model() -- It gives an error about unpacking boolean.
#self.fields['categories_queryset'] = Categories.objects.filter(Categories.user_id=get_user_model())
# Q(Categories.user_id__isnull==True) |
# User.objects.filter(username=username).exists():

models.py

from django.db import models
from django.db.models import Q
from users.models import CustomUser
from django.urls import reverse
from django.contrib.auth import get_user_model

class Categories(models.Model):
category_type = models.CharField(max_length=50)
user = models.ForeignKey(CustomUser, null = True,  on_delete=models.CASCADE)
def __str__(self):
return '%s ' % (self.category_type)
def get_absolute_url(self):
return reverse('task_list')
class Task(models.Model):
task_title = models.CharField(max_length=100)
task_description = models.TextField()
date_added =  models.DateTimeField(auto_now_add=True)
due_date  = models.DateTimeField()
is_completed = models.BooleanField(default=False)
user = models.ForeignKey(get_user_model(), on_delete=models.CASCADE)
categories = models.ForeignKey(Categories, on_delete=models.CASCADE)
parent = models.ForeignKey("self", on_delete=models.CASCADE)
class Meta:
verbose_name = "Task"
verbose_name_plural = "Tasks"         
def __str__(self):
return '%s ID: %s' % (self.task_title, self.last_name)
def get_absolute_url(self):
return reverse('task_detail')        

谢谢。。。

Answer 1

花了很长时间才弄清楚这一点，但幸运的是解决方案非常简单。

在您的示例中，ajax 请求按预期工作。但是，django-modal-forms使用以下行检查响应是否存在错误：

if ($(response).find(settings.errorClass).length > 0) {...}

默认设置中的错误类设置为".invalid"，但脆皮表单使用类".is-invalid"呈现其错误。这就是为什么表单未被识别为错误并提交(包括页面刷新(而不是重新呈现错误消息的原因。

将javascript部分更改为以下内容为我解决了它。

$(document).ready(function() {
$(".create-task").modalForm({
formURL: "{% url 'create_task' %}",
errorClass: ".is-invalid"
});
});

Answer 2

这个问题发布已经很久了，但由于我目前遇到了同样的问题，我敢于分享我的经验： 当我不像你那样使用脆皮形式时，我已经让它按预期运行。我担心，你必须处理一个JS实现，如django-crispy-forms文档中所描述的那样。