我如何实现引导模式窗体与django脆皮窗体，没有页面刷新

Question

我一直在尝试用引导模式实现一个表单，使用django-Crispy表单。我使用基于类的视图。我知道我需要一些Ajax，但是我不理解我看到的所有例子。我尝试了django-bootstrap-modal-form-这与modal一起工作，但遗憾的是，它不支持引导样式，我找不到任何方法来添加它。当我尝试使用引导表单类、表单控件向django-bootstrap-modal表单添加引导式Syling时，表单不提交，也不会出错。所以现在，我想回到django脆皮形式。

所以我的问题是：

>

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

我的代码如下所示：

我的模板。html当前包含django引导模式表单的CSS类。退房https://pypi.org/project/django-bootstrap-modal-forms/
可以用{form | crispy}替换模态体中的文本，以使用django crispy形式

<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' %}"
            });

        });

形式。派克

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():

模型。派克

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

这个问题已经发布了很长时间了，但由于我目前正在处理同一个问题，我敢分享我的经验：当我没有像你那样使用crispy表单时，我已经按照预期运行了它。我担心，您必须处理JS实现，如django crispy forms文档中所述。

Answer 2

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

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

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

默认设置中的错误类设置为“.invalid”，但crispy表单使用类“.is invalid”呈现其错误。这就是为什么表单不会被识别为错误并提交（包括页面刷新），而不会重新提交错误消息。

将javascript部分更改为以下内容为我解决了这个问题。

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