Django Form validation errors handling using AJAX

Question

Having the following form being generated in a Modal:

Template:

...

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

...

I'm submitting the form using AJAX as follow:

        $(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;

In my View I'm returning an HttpResponse in case the form is Not Valid:

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

Here I have the error messages and the correspondent Form Field:

phone_number
box_enabled

How can I pass this error messages correctly to the form html?

Thanks

Adam Starrh · Accepted Answer · 2016-08-25 18:50:59Z

1

I think you want something along these lines from your view:

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)

My Javascript isn't so good, but you can do something to the effect of if response.status is 2, display message. Maybe someone else can give the code for it.

answered Aug 25, 2016 at 18:50

Adam Starrh

6,9989 gold badges55 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thathashd Over a year ago

Thanks for your reply. I already have a reply to the request in JSON format. That is fine. I would like to know if there is a generic way to retrieve the Django Form validation errors in the Form as it does without using AJAX.

Collectives™ on Stack Overflow

Django Form validation errors handling using AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related