Django. Ajax. Не могу понять, почему форма остаётся не валидной

У меня есть форма, которая проверяется на ошибки с помощью Ajax. Проблема в том, что несмотря на наличие ошибок, форма в представлении всегда остаётся не валидной:

views.py

if request.method == "POST":
    instance = get_object_or_404(User, id=request.user.id)
    form = EditProfile(request.POST, request.FILES, instance=instance)
    print(form.is_valid()) # <- Всегда невалидно
    if form.is_valid():
        avatar = form.cleaned_data['avatar']
        first_name = form.cleaned_data['first_name']
        last_name = form.cleaned_data['last_name']
        bio = form.cleaned_data['bio']
        city = form.cleaned_data['city']
        age = form.cleaned_data['age']
        skills = form.cleaned_data['skills']
        gender = form.cleaned_data['gender']

        form.save()

        return redirect(f'profile/{request.user.username}')
    else:
        return JsonResponse({'errors': form.errors})
else:
    form = EditProfile()

return render(request, 'my_profile/edit_profile.html', {
    'form': form,
    })

и получается, что форма не сохраняется и не происходит редирект по адресу /profile/{request.user.username}

edit_profile.js

function appointmentForm() {
    const formId = '#image-form'
    $(document).on('submit', '#image-form', function(e){
        e.preventDefault()

        $.ajax({
            url: 'edit_profile',
            type: 'POST',
            dataType: 'json',
            data: {
                first_name: $('#id_first_name').val(),
                last_name: $('#id_last_name').val(),
                bio: $('#id_bio').val(),
                city: $('#id_city').val(),
                age: $('#id_age').val(),
                skills: $('#id_skills').val(),
            },

            success: (data) => {

               if ('errors' in data) {
                    $(formId + 'input' + formId + ' textarea').each((index, el) => {
                        $(el).removeClass('is-invalid').addClass('is-valid')

                    })

                    $(formId + ' .invalid-feedback').each((index, el) => {
                        $(el).remove()
                    })

                    for (let key in data['errors']) {
                        $(formId).find('textarea[name="' + key + '"]').removeClass('is-valid').addClass('is-invalid')
                        $(formId).find('input[name="' + key + '"]').removeClass('is-valid').addClass('is-invalid')


                        $(formId).find('input[name="' + key + '"]').after(() => {
                            let result = ''
                            for (let k in data['errors'][key]) {
                                result += data['errors'][key][k] + '<br>'
                            }
                            return '<div class="invalid-feedback">' + result + '</div>'
                        })

                        $(formId).find('textarea[name="' + key + '"]').after(() => {
                            let result = ''
                            for (let k in data['errors'][key]) {
                                result += data['errors'][key][k] + '<br>'
                            }

                            return '<div class="invalid-feedback">' + result + '/div'
                        })
                    }
               }
            },
        })
    })
}

appointmentForm();

Буду рад любой помощи. Спасибо!

Вернуться на верх