Django Form validation errors handling using AJAX
<p>Having the following form being generated in a Modal:</p>

<p><strong>Template:</strong></p>

<p>...</p>

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

<p>...</p>

<p>I'm submitting the form using AJAX as follow:</p>

<pre><code>        $(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;
</code></pre>

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

<pre><code>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"}]}
</code></pre>

<p>Here I have the error messages and the correspondent Form Field:</p>

<ul>
<li>phone_number</li>
<li>box_enabled</li>
</ul>

<p>How can I pass this error messages correctly to the form html?</p>

<p>Thanks</p>

<p>I think you want something along these lines from your view:</p>

<pre><code>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)
</code></pre>

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

python ajax django