How correctly show ValidationError in Django and AJAX?

Question

In my Django project I have modal with form where superuser can create new user.

I want to show ValidationError which I set in forms.py file when superuser by mistake write existing email or passwords are not similar.

Right not when superuser submit form which has mistakes as I described above browser raise error:

SyntaxError: JSON.parse: unexpected character at line 3 column 1 of the JSON data

Uncaught TypeError: a.replace is not a function
    at Function.htmlPrefilter (jquery.min.js:3)
    at qa (jquery.min.js:3)
    at Ja (jquery.min.js:3)
    at r.fn.init.append (jquery.min.js:3)
    at r.fn.init.<anonymous> (jquery.min.js:3)
    at T (jquery.min.js:3)
    at r.fn.init.html (jquery.min.js:3)
    at Object.error (crud.js:45)
    at i (jquery.min.js:2)
    at Object.fireWith [as rejectWith] (jquery.min.js:2)

QUESTION: How to show error messages correctly when data is not valid?

forms.py:

class UserCreateForm(UserCreationForm):
    class Meta:
        model = User
        fields = ('username', 'first_name', 'last_name', 'email', 'is_active', 'is_superuser', 'password1', 'password2')

    def clean_email(self):
        email = self.cleaned_data['email']
        if User.objects.filter(email=email).exists():
            raise ValidationError(_("Email already exists."))
        return email

    def clean_password2(self):
        password1 = self.cleaned_data.get("password1")
        password2 = self.cleaned_data.get("password2")
        if password1 and password2 and password1 != password2:
            raise forms.ValidationError(_("Enter the same password as above, for verification."))
        return password2

views.py:

class UserCreateView(CreateView):
    template_name = 'users/create_user.html'
    form_class = UserCreateForm

    def get(self, request, *args, **kwargs):
        data = dict()
        user_create_form = UserCreateForm()
        context = {'user_create_form': user_create_form}
        data['html_user_create_form'] = render_to_string(
            'users/create_user.html', context, request=request
        )
        return JsonResponse(data)

    def form_valid(self, form):
        form.save()
        data = dict()
        data['form_is_valid'] = True
        context = {'profiles': Profile.objects.all(),}
        data['html_users'] = render_to_string('users/users.html', context)
        return JsonResponse(data)

JS:

$(function ($) {
    $("#userModalBox").on("submit", ".userCreateForm", function () {
        var form = $(this);
        var dataForm = new FormData(form.get(0));
        $.ajax({
            url: form.attr("action"),
            data: dataForm,
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#loader").show("slow");
                    setTimeout(function() {
                        $("#loader").hide("slow");
                        $("#users").html(data.html_users);
                        $("#users").sortable("refresh");
                        $("#users").sortable("option", "disabled", $("#users .list-group-item").length == 1);
                        $("#userModalBox").modal("hide");
                        $("#userMessageCreate").fadeIn("slow");
                        setTimeout(function() {$("#userMessageCreate").fadeOut("slow");}, 2000);
                        $('#searchUsers').val('');
                    }, 2500);
                }
                else {
                    $("#userModalBox .modal-content").html(data.html_user_create_form);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#userError").fadeIn("slow")
                $("#userError span.error-description").html(thrownError);
                setTimeout(function() {$("#userError").fadeOut("slow");}, 10000);
            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });
}(jQuery));

templates:

{# START: AJAX ERROR #}
<div class="alert alert-danger alert-dismissible text-center" role="alert" id="userError">
     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
    <strong>&nbsp;{% trans "ERROR" %}:</strong><br><span class="error-description"></span>
</div>
{# END: AJAX ERROR #}


{# START: DJANGO ERROR #}
{% if user_create_form.non_field_errors %}
  <div class="well well-error">
    {% for error in user_create_form.non_field_errors %}
      <ul class="list-unstyled">
        <li class="text-danger">
          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
            <strong>&nbsp;{{ error|escape }}</strong>
          </li>
        </ul>
    {% endfor %}
  </div>
{% endif %}
{# END: DJANGO ERROR #}

EDIT PART:

views.py:

def form_invalid(self, form):
        data = dict()
        data['form_is_valid'] = False
        data['form_errors'] = form.errors
        print form.errors
        return JsonResponse(data)

JS:

if (data.form_is_valid) {
   // Some code             
}
else {
   $("#userModalBox .modal-content").html(data.html_user_create_form);
   $('#userModalBox .error-description').html(data.form_errors); <-- DONT WORK???
}

Answer 1

If you want to return form errors in your AJAX response,

Override form_invalid like this:

def form_invalid(self, form):
    error_dict= {'status':'form-invalid','form-errors':form.errors}
    return HttpResponse(json.dumps(error_dict),content_type="application/json")

form.errors: gets the form validation errors if password1 != password2. In your ajax success response("form valid and invalid will always return a response, error function will work only if the code breaks in form valid")

In your AJAX:

if (data.status=="form-invalid") {
    Whatever you want to do e.g. 
    $('.class-name').html(data.form-errors)
}

data.status checks if the json-dict returned in response has status="form-errors", then append those errors in a div or anywhere you want.

Note: Ajax error function only works if there is no response to a request. Form valid and invalid will always return a response and will come in ajax success function unless a break/error in code(will return no response).

Answer 2

form_valid is only called if the form is valid, hence the name.

So in the case that your form is valid you are returning a JSON response, as your JS code expects. However, if the form is not valid, Django will call form_invalid instead; and since you have not overridden that method, it will continue to return a pure HTML response.