使用 django 和 ajax 显示表单错误

Question

我有一个联系表格，用户可以通过它联系我。我正在使用带有 ajax 的 django，它工作正常 如果 没有错误。如果在输入字段上方显示任何类似的错误，我想显示错误，而不仅仅是错误，而是输入和错误。但是，它确实区分了 success 和 error 结果，因为 ajax 请求是成功的。但我需要显示实际的表单错误。我该怎么做？您的帮助将不胜感激。谢谢。

观看次数：

def contact(request):
    if request.is_ajax() and request.POST:
        form = ContactForm(request.POST)
        if form.is_valid():
            new_contact = form.save()
            data = {
                'result': 'success',
                'message': 'Message Sent.'
            }
            return JsonResponse(data)
        else:
            data = {
                'result': 'error',
                'message': 'Form invalid',
                'form': 'oops.'
            }
            return JsonResponse(data)
    else:
        form = ContactForm()
        return render(request, 'public_contact.html', {
            'form': form
        })

js:

contact_right_form.find('#submit').on('click', function(event) {
    event.preventDefault();
    $.ajax({
        type: contact_right_form.attr('method'),
        url: '/contact/',
        data: contact_right_form.serialize(),
        dataType: 'json',
        success: function(data) {
            if ( data.result == 'success') {
                contact_right_message_sent.text(data.message);
                contact_right_message_sent.show();
            }
            else {
                contact_right_message_sent.text(data.message);
                contact_right_message_sent.show();
            }
        },
        error: function() {
            contact_right_message_sent.text('Sorry! Something went wrong.')
        }
    });
})

更新

我想在没有 ajax 的情况下显示如下错误：

Answer 1

举例

django 表单使用 form.errors.as_json() 以 json 格式返回错误。假设：

{
    "sender": [
         {
           "message": "Enter a valid email address.", 
           "code": "invalid"
         }
    ],

    "subject": [
          {
            "message": "This field is required.", 
            "code": "required"
          }
    ]
}

之后，ajax 得到响应（在success: function(data) {}。假设已经成为一个对象：

    data = {
    "sender": [
    {
        "message": "Enter a valid email address.", 
      "code": "invalid"
    },
    {
        "message": "Enter a .", 
      "code": "invalid"
    }
  ], 
   "subject": [
    {
        "message": "This field is required.", 
      "code": "required"
    }
  ]
};

并且您已经呈现了以前的表单，假设：

<input type="text" name="sender"> <br>
<input type="text" name="subject"> <br>
<button>Submit</button>

要呈现这些消息，您可以在点击事件中编写脚本：

// in ajax success (event click)
if ($("input").next('p').length) $("input").nextAll('p').empty();
    for (var name in data) {
    for (var i in data[name]) {
      // object message error django
      var $input = $("input[name='"+ name +"']");
      $input.after("<p>" + data[name][i].message + "</p>");
    }
  }

模拟示例：

// simulation example, Data obtained from ajax response

var data = {
	"sender": [
  	{
    	"message": "Enter a valid email address.", 
      "code": "invalid"
    },
    {
    	"message": "Enter a .", 
      "code": "invalid"
    }
  ],
	"subject": [
  	{
    	"message": "This field is required.", 
      "code": "required"
    }
  ]
};

$("button").on("click", function() {
	if ($("input").next('p').length) $("input").nextAll('p').empty();
	for (var name in data) {
    for (var i in data[name]) {
      // object message error django
      var $input = $("input[name='"+ name +"']");
      $input.after("<p>" + data[name][i].message + "</p>");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="sender"> <br>
<input type="text" name="subject"> <br>
<button>Submit</button>

Answer 2

您需要为JsonResponse 定义status_code 参数。

return JsonResponse(data, status_code=400)

这样，它将在 $.ajax 中的 error 回调中结束。

Answer 3

虽然您可以返回所有 json 并将错误添加到字段中，但另一种方法是仅呈现表单的部分模板并将 html 返回给浏览器。然后，您只需将表单替换为返回的表单。

我并不是说这是最好的做法，但这是一种方法。

例如，您有 /form.html 并将其包含在页面中

{% include 'form.html' %}

然后在你的 form_invalid 方法中，返回渲染的 html 字符串

return render(self.request, 'form.html', {'form' : form}, status=500)

然后在你的JS错误方法中，将页面上的表单替换为服务器返回的html。