使用 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 表单使用 .json 格式返回 json 格式的错误form.errors.as_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>");
    }
  }

模拟示例：

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

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

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

Answer 2

您需要为 定义status_code参数JsonResponse。

return JsonResponse(data, status_code=400)

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