首页 > 解决方案 > 如何让来自 Ajax 的 Django 表单错误出现在用户屏幕上?

问题描述

也许我没有清楚地思考......但对我来说,如果我通过 AJAX 提交表单......我可以通过传统 HTML 方法提交的相同表单我应该能够获得表单错误并像我通过 HTML 提交一样显示它们?如果我打印它们,我当然可以在我的控制台中得到 form.errors ......但我似乎无法弄清楚如何让它们回到模板中,以便它们呈现在用户的屏幕上。JSONRESPONSE 在不同的屏幕上显示它们......但我怎样才能让它们回到表单本身?

这是我的观点...

class CreateProcedureView(LoginRequiredMixin,CreateView):
    model = NewProcedure
    form_class = CreateProcedureForm
    template_name = 'create_procedure.html'

def form_valid(self, form):
    instance = form.save()
    return JsonResponse({'success': True })

def form_invalid(self, form):
    response = JsonResponse({"error": "there was an error"})
    response.status_code = 403 # To announce that the user isn't allowed to publish
    return response

def post(self, request, *args, **kwargs):
    if "cancel" in request.POST:
        return HttpResponseRedirect(reverse('Procedures:procedure_main_menu'))
    else:
        self.object = None
        user = request.user
        form_class = self.get_form_class()
        form = self.get_form(form_class)
        file_form = NewProcedureFilesForm(request.POST, request.FILES)
        files = request.FILES.getlist('file[]')
        if form.is_valid() and file_form.is_valid():
            procedure_instance = form.save(commit=False)
            procedure_instance.user = user
            procedure_instance.save()
            list=[]
            for f in files:
                procedure_file_instance = NewProcedureFiles(attachments=f, new_procedure=procedure_instance)
                procedure_file_instance.save()
            return self.form_valid(form)
        else:
            form_class = self.get_form_class()
            form = self.get_form(form_class)
            file_form = NewProcedureFilesForm(request.POST, request.FILES)
            return self.form_invalid(form)

这是我的阿贾克斯...

     $.ajax({
         url: "{% url 'Procedures:create_procedure' %}",
         headers: { "X-CSRFToken": token },
         method: "post",
         data: $("#forms").serialize() + "&status=" + "Submitted",
         success: function(data){
               alert(data.message);
           },
           error: function(data){
              alert(data.status); 
              alert(data.responseJSON.error); 
           }
     });
    });

标签: djangoajaxdjango-rest-frameworkdjango-formsdjango-templates

解决方案


例如,如果您在表单输入下有一个 span 标签

<span id="error_first_name"></span>

使用 Jquery 附加 $('#error_first_name").text(data.responseJSON.error.first_name[0])


推荐阅读