Django form not valid (form.is_valide() return False) on AJAX request

Question

I have a form for a model which contains ImageField and i want user to be able to submit image via AJAX.

Problem is that form.is_valide() returns False. When i dont use AJAX everything seems to be okay. I tried couple of SO answers on similar questions but with no luck.

View (simplified version)

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:

            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

HTML

<form id = "form" action="{% url 'photos:index' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

JS/JQuery

 $(document).ready(function(){

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
             // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
        return cookieValue;
    }
var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
    }

    $('#form').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/',
            type: 'POST',
            data: new FormData($(this)),
            cache:false,
            processData: false,
            contentType: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                alert("yo success");
                alert(data.message);
            }
        });
    });
});

Any help i can get is much appreciated. Thanks

Why is the form invalid? Might be a good idea to put the field errors in the HttpResponse when it fails instead of just "not ok" — Tareq, Nov 15 '14 at 01:31
It says that each field in my form is required (got html, for form.errors, with ul which has li for every field, saying that it is required). — 4evertoblerone, Nov 15 '14 at 01:57
have you checked what actually comes in `request.POST`? It's either coming without the values entered in the form (in which case I would blame `FormData`) or the data is there but with a different [prefix](https://docs.djangoproject.com/en/1.7/ref/forms/api/#prefixes-for-forms). — Gonzalo, Nov 15 '14 at 12:51
@GonzaloDelgado i have changed contentType to 'application/x-www-form-urlencoded;charset=utf-8' ,it seems that is the way to go with FormData, and now it sends text-like fields but file(image) is empty. — 4evertoblerone, Nov 15 '14 at 13:24
@GonzaloDelgado Ok, during that contentType change i v changed DataForm part to $(this).serialize(). When data is set to $(new DataForm($(this)) and conteType to application/x-www-form-urlencoded;charset=utf-8 , in request i have FormData object with all the form fields and they are not empty. But somehow i still get the form.is_valid() to be False. — 4evertoblerone, Nov 15 '14 at 13:48

score 1 · Answer 1 · answered Nov 15 '14 at 03:59

When a Django form is passed data, it's considered 'Bound' at that point, and calling form.is_valid() will do a full clean on the bound data to the form and set an instance attribute self._errors. Outputting the data from self._errors will probably give you the information needed in order to submit valid data to the form.

My suggestion would be to debug the source code as such...

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:
            # output form.errors here and figure out what fields aren't passing validation
            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

I did that:) and it tells me that all fields are somehow empty. — 4evertoblerone, Nov 15 '14 at 06:43

score 0 · Accepted Answer · answered Nov 17 '14 at 01:48

Solution is to manually fill FormData object

JS/JQuery

$('#form').submit(function(e){
        e.preventDefault();

        //fill FormData with form fields

        var data = new FormData($(this));
        data.append("photo", $("#id_photo")[0].files[0]);
        data.append("description",$("#id_description").val());

        $.ajax({
            url:'/',
            type: 'POST',
            data: data,
            cache:false,
            processData: false,
            contentType: false, 
            //part related to Django crsf token
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                var parseData = $.parseJSON(data);
                console.log(parseData.message);
            }
        });

    });

Django form not valid (form.is_valide() return False) on AJAX request

2 Answers2