title: Display form errors with django and ajax
body: <p>I have a contact form through which users would be able to contact me. I am using django with ajax, and it works fine <strong>if</strong> there's no error. I would like to show the errors if there's any like it displays above the input fields and not just the errors, but both the input and the errors. It does however differentiate between the <code>success</code> and <code>error</code> result, as the ajax request was successful. But I need to display the actual form errors. How do I that? Your help will be very much appreciated. Thank you.</p>
  
  <p>views:</p>
  
  <pre><code>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
          })
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>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.')
          }
      });
  })
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I would like to display the errors like the below as it normally does without ajax:</p>
  
  <p><a href="https://i.stack.imgur.com/m5ChD.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/m5ChD.jpg" alt="enter image description here"></a></p>