django + ajax output errors to the form

Question

I use ajax to submit the form.

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

when the form is valid, everything works fine. But I'm don’t understand how to display errors on the form if the field is entered incorrectly. They are displayed in the browser console.

I deduce the form in the template as follows:

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

if you need code from views.py I can add. Help me please

Andrey Nelubin · Accepted Answer · 2020-03-12 06:05:05Z

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>')
    })

}

answered Mar 12, 2020 at 6:05

Andrey Nelubin

3,3081 gold badge22 silver badges27 bronze badges

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

9 Comments

qwerty Over a year ago

Why did I get an error only in the number? Is there a captcha?

Andrey Nelubin Over a year ago

I don't understand you. What number? What do you mean by last question?

qwerty Over a year ago

when entering the wrong phone number and captcha, an error is displayed only in the number

qwerty Over a year ago

I probably understood why. By default, django-simpel-captcha input have name captcha_1

Andrey Nelubin Over a year ago

I guess your view returns error response code and your error handler executes. Otherwise executes success`` executes. Try to console.log(arguments)``` in error handler to view all arguments.

|

Collectives™ on Stack Overflow

django + ajax output errors to the form

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related