当后端表单验证失败时，如何在 jQuery 对话框中重新打开 Django 表单？

Question

我有一个 Django 表单，在用户单击网页上的链接后，我将其动态加载到 jQuery 对话框中。链接中的 href 指向仅包含表单内容的 Django 页面，而不包含整个站点布局。

        $('#add-note').click(function() {
            $('#dialog').load($(this).attr('href')).dialog({
                title: 'Add a note',
                modal: true,
                draggable: false,
                minWidth: 500,
            });

            return false;
        });

如果用户提交在后端验证的表单，则效果很好。但是，如果表单包含验证错误，Django 会将浏览器转发回表单页面，在这种情况下，该页面实际上并不是用户当前正在查看的页面。

看，用户位于完全不同的页面上，表单只是动态加载到 jQuery 对话框中。那么问题来了，处理这种情况的最佳方法是什么？如何打开带有验证错误的表单返回到对话框而不是表单页面本身？

非常感谢所有帮助！

Answer 1

当使用 AJAX 和 Django 表单时，我通常采用以下方法（虽然没有代码示例，但我想您会明白的）。

• 创建一个不同的模板，仅用于在您的视图中呈现此表单（无块，无从另一个模板扩展），
• 该模板呈现模板以显示表单，通过 django.template.loader.render_to_string 将此表单直接呈现为 html代码>（使用我提到的模板）。将这个呈现的表单放入上下文中，将其推送到模板。
• 在模板中为表单创建一个容器并在其中呈现 html。
• 当您现在通过 AJAX 提交表单时，请确保提交表单的处理程序也呈现该表单（就像通过 django.template.loader.render_to_string 在您的原始视图中一样）并至少将其返回为 html 。如果表单无效，这将包括错误。
• 获取 AJAX 响应时，只需完全替换容器中的表单即可。之后，您将获得 Django 表单，其中包含原始 Django 表单提交中的所有错误。

这种方法的优点是 Django 仍然负责表单验证和错误显示，并且您不需要通过 Javascript 来处理它（可能有点烦人，特别是对于字段错误）。缺点当然是你必须为它编写更多的后端代码。 :)

Answer 2

如果表单无效，我会返回一个错误和一条消息，而不是返回 200、成功等。在视图中，它是这样的：

if form.is_valid():
    ...hooray!
else:
    return HttpResponse(json.dumps({'error': msg}), status=400, 
                        mimetype='application/json')

在我刚刚发出的 ajax 请求中，请求将失败，我将在某处（通常在对话框中）向用户显示错误，并且 javascript 将如下所示：

$.ajax({
  type: 'POST',
  data: form,
  error: function(data) {
    var error = $.parseJSON(data.responseText);
    $('#error').text(error.error);
    $('#error').show();
  }
}); 

Answer 3

一个快速而肮脏的非ajax解决方案是：

$(function() {
    {% if form.errors %}
        $( "#form" ).dialog( "open" );
    {% endif %}
});

或者如果你有一个表单集：

{% if formset.is_bound and not formset.is_valid %}
    $( "#formset" ).dialog( "open" );
{% endif %}

注意：formset.errors将始终为true（如果没有任何错误，它是一个空字典列表），所以你必须使用is_bound和is_valid 以这种方式，否则您将始终在提交表单集后打开该对话框。

编辑：
这实际上并不能完全回答最初的问题。我发现您的表单是从不同的网址加载的。如果您在同一视图中处理表单并且只是将其显示在同一页面上的 jQuery 对话框中，我的解决方案确实有效。