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

时间:2016-08-25 18:19:56

标签: python ajax django

在模态中生成以下表单:

模板:

...

<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"}]}

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

  • PHONE_NUMBER
  • box_enabled

如何将此错误消息正确传递给表单html?

由于

1 个答案:

答案 0 :(得分: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.status2,则显示message。也许其他人可以为它提供代码。