使用Ajax张贴Django表单数据时呈现验证错误

Question

How does one generally go about handling validation errors when using Ajax to process POST requests of Django forms?

I'm a server-side dev dabbling in a bit of pure JS to learn the ropes. I finished writing AJAX methods to handle the POST request of a Django form, but am now unsure regarding how to render validation errors.

For instance, here's a simple Django form:

class TextForm(forms.Form):

    reply = forms.CharField(widget=forms.Textarea(attrs={'cols':30,'class': 'cxl','autocomplete': 'off','autofocus': 'autofocus'}))

    def __init__(self,*args,**kwargs):
        super(TextForm, self).__init__(*args,**kwargs)
        self.fields['reply'].widget.attrs['id'] = 'text_field'

    def clean(self):
        data = self.cleaned_data
        reply = data["reply"].strip()
        if not reply:
            raise forms.ValidationError('Write something')
        elif len(reply) > 1500:
            raise forms.ValidationError("Can't exceed 1500 chars")
        return reply

And here's how the Ajax request works:

function overwrite_default_submit(e) {
  // block the default behavior
  e.preventDefault();

  // create and populate the form with data
  var form_data = new FormData();
  form_data.append("reply", text_field.value);

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', e.target.action);
  xhr.setRequestHeader("X-CSRFToken", get_cookie('csrftoken'));
  xhr.send(form_data);
}

What's the best pattern to catch and display validation errors under such circumstances? Moreover, what if a file upload field was involved? Would love to see an illustrative example of how the experts do it.

Note: I prefer pure JS at this point since that's what I'm starting with. JQuery's on my radar, but I'll look at it in the future.

Answer 1

In the Django view, at the point where form.is_valid() fails, one can further place a check of the sort if request.is_ajax() . In this block, an HTTPResponse (or JSONResponse) of the following structure can be returned:

payload = {}
payload['success'] = False
payload['message'] = ERR_MSG['generic']
return HttpResponse(json.dumps(payload),content_type='application/json',)

This, in turn, can be caught in the AJAX side of things like so:

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200)
        {
            var resp = JSON.parse(this.responseText);
            if (!resp.success) {
                console.log(resp.message);
            } else {
                console.log("success at last");
            }
        }
    }; 

Once the payload has reached the realm of JS, one can then proceed to render it accordingly.

I'll add more sophistication to this answer when/if I discover more (and when warranted). Over and out.