Django：Crispy 表单的 Ajax 验证答案

【问题标题】：Django: Ajax validation of Crispy formsDjango：Crispy 表单的 Ajax 验证
【发布时间】：2015-07-09 00:36:31
【问题描述】：

我正在尝试让Crispy forms Ajax validation 为我的 Django 站点工作，但我不确定应该如何显示错误。当我提交无效表单时，返回的 JSON 表单似乎与原始表单完全相同，所以我不明白错误响应应该如何发生。

按下表单按钮时调用的（缩写）视图：

from crispy_forms.utils import render_crispy_form
from jsonview.decorators import json_view

@login_required
@json_view
def create_lab_device(request, owner):
    add_device_form = AddNewDeviceForm(request.POST)
    if request.method == 'POST' and add_device_form.is_valid():
        # do the stuff to save to database
        return {'success':True}
    # form not valid, return false with the rendered form
    form_html = render_crispy_form(add_device_form)
    return {'success':False, 'form_html':form_html}

原始视图中发送的 Crispy 表单：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Button
from crispy_forms.bootstrap import InlineField

class AddNewDeviceForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super(AddNewDeviceForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'add-new-device-form'
        self.helper.form_class = 'form-inline'
        self.helper.form_method = 'post'
        self.helper.add_input(Button('submit', 'Add', css_class='btn-default'))
        self.helper.layout = Layout(
            InlineField('name'),
            InlineField('ip'),
        )

    name = forms.CharField(
        label="Name",
        max_length=30,
        required=True,
    )
    ip = forms.IPAddressField(
        label="IP Address",
        max_length=15,
        required=True,
    )

点击按钮时调用的javascript函数：

function add_device_submit(){
    var form_id = '#add-new-device-form';
    $('#button-id-submit').on("click",function(){
        $.ajax({
            url: "new/",
            type: "POST",
            data: $(form_id).serialize(),
            success: function(data){
                if (!(data['success'])){
                    $(form_id).replaceWith(data['form_html']);
                } else {
                    $(form_id).find('.success-message').show();
                }
            },
            error: function(){
                $(form_id).find('.error-message').show();
            }
        });
    });
};

当我提交仅输入“名称”字段的表单时，我看不到页面上呈现的任何不同。使用 Firebug 我可以看出浏览器正在重新渲染表单，但它替换的数据与表单创建的原始数据完全相同。

我应该如何显示表单错误？ Crispy 教程没有解释应该在哪里显示错误。

【问题讨论】：

标签： javascript python django django-crispy-forms

【解决方案1】：

所以，我最近遇到了一个非常相似的问题，但我意识到阅读有关 javascript 和 ajax 的知识特别有帮助。首先，你的观点应该是：

@login_required
def create_lab_device(request, owner):
  if request.method == 'POST':
      add_device_form = AddNewDeviceForm(request.POST)
      context_dict={}
      if response.is_ajax():
        add_device_form.is_valid():
        # do the stuff to save to database
        context_dict['success']=True
      else:
       # form not valid, return false with the rendered form
       context_dict['success']=False
return JsonResponse(context_dict)

除此之外，渲染的表单不需要发回。请记住，前端已经有一个渲染的表单。使用 Ajax 是因为它减少了呈现数据的需要。如果“成功”返回 False，您可以重置表单。另请注意，您将无法向此视图发送 GET 请求。接下来，我使用了适用于 Django 1.7+ 的 JsonResponse 对于早期版本，

   HttpResponse(json.dumps(context_dict), mimeType="application/json")

应该使用。

success: function(data){
            if (!(data['success'])){
                $(form_id)[0].reset();
            } else {
                $(form_id).find('.success-message').show();
            }
        },
        error: function(){
            $(form_id).find('.error-message').show();
        }

请记住，错误意味着根本没有收到 ajax 响应。

【讨论】：