python - 使用 AJAX 处理 Django 表单验证错误

Question

在模态中生成以下表单:

模板:

...

<div id="form-modal-body" class="modal-body">
            <form id="register_new_customer" method="post" action="{% url "customer:new_customer" %}">
                {% csrf_token %}
                <div id="form-errors" class='form-errors' class="text-danger"></div>
                {%for field in customer_form %}
                    <div class="form-group {%if field.errors %} has-error{%endif%}">
                        <span class="help-block">{{ field.errors }}</span>
                        <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
                        <div>{{ field }}</div>
                    </div>
                {% endfor %}
                <div class="modal-footer">
                    <div class="col-lg-10 col-lg-offset-2">
                        <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>

...

我使用 AJAX 提交表单，如下所示:

        $(document).on('submit', '#register_new_customer', function(e) {
        e.preventDefault();
        var frm = $('#register_new_customer')
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success:function (response) {
                // TODO: How to handle Form Validation error messages?!
            }
        })
        return false;

在我看来，如果表单无效，我将返回 HttpResponse:

return HttpResponse(customer_form.errors.as_json())

"phone_number": [{"message": "Please enter a valid Phone Number!", "code": "invalid"}], "box_enabled": [{"message": "This field is required.", "code": "required"}]}

这里有错误消息和相应的表单字段:

• 电话号码
• box_enabled

如何将此错误消息正确传递到 html 表单？

谢谢

Answer 1

我认为您希望从您的角度来看一些类似的东西:

from django.http import JsonResponse

def phone_number_eval(request):

    if phone_number is valid:
        response = {'status': 1, 'message': "Ok"}
    else:
        response = {'status': 2, 'message': "Please enter a valid phone number."} 

    return JsonResponse(response)

我的Javascript不太好，但是你可以做一些事情，如果response.status是2，则显示message 。也许其他人可以提供它的代码。