django + ajax вывод ошибок в форму

Question

Я использую ajax для отправки формы.

$(document).ready(function(){ 
   $(document).on("submit", "#my_form", function(event) {
    event.preventDefault(); 
   $this = $(this); 
   $.ajax({ 
    type: "POST",
    data: $this.serialize(), 
    success: function(data) 
    { console.log(data);
      if (data.result == 'success') {
       var parent=$("#my_form").parent();
       parent.html(data.success); }
       else if (data['result'] == 'error') {

      }
    }, 
    error: function(data) 
    { console.log(data); } 
  }); 
 }); 
});

когда форма действительна, все работает отлично. Но я не понимаю, как отображать ошибки в форме, если поле введено неправильно. Они отображаются в консоли браузера.

Я выведу форму в шаблон следующим образом:

<form action="" method="post" autocomplete="off" id="my_form">
   {% csrf_token %}
  <div class="contact-form" >
   <h1>{%trans 'Register' %}</h1>
   <div class="txtb">{{form.fio.label}} {{form.fio}}{{form.fio.help_text}}</div>
   <div class="txtb">{{form.phone.label}} {{form.phone}}{{form.phone.help_text}}{{form.errors}}</div> 
   <div class="txtb"> {{form.date_visit.label}}{{form.date_visit}}</div>
   <div class="txtb"> {{form.captcha.label}}{{form.captcha}}{{form.errors}}</div>
   <input type="submit" value="{%trans 'subbmit' %}" class="btn" id="btn">   
  </div>
</form>

, если вам нужен код из views.py, который я могу добавить. Помогите мне, пожалуйста

Answer 1

// before ajax send

$("#my_form p.error").remove();
$("#my_form input").removeClass('b-error')
...
$.ajax
...
if (data.result == 'success') {
    ...
} else if (data['result'] == 'error') {
    Object.keys(data['response'].forEach(function(key) {
        $("#my_form input[name='" + key +  "'")
            .addClass('b-error')
            .after('<p class="error">' + data['response'][key] + '</p>')
    })

}