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

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

我不是说这是最好的事情，但这是一种方法。

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

中

{% include 'form.html' %}

然后在form_invalid方法中，返回呈现的html字符串

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

然后在您的JS错误方法中，使用从服务器返回的html替换页面上的表单。

Answer 2

您需要为status_code定义JsonResponse参数。

return JsonResponse(data, status_code=400)

这样它最终会在$ .ajax的error回调中结束。

Answer 3

作为示例

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>");
    }
  }

模拟示例：

＆＃13;

// 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>");
    }
  }
});

＆＃13;

<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>

＆＃13;

使用django和ajax显示表单错误

3 个答案: