Django：Crispy表单的Ajax验证

Question

我正在尝试让Crispy表单Ajax验证适用于我的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}

在原始视图中发送的脆皮表格：

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教程没有解释应该在哪里显示错误。

Answer 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响应。