Django - Ajax call outputting nothing

Question

In my project, I use AJAX to return a message to the user if a form is invalid without them having to refresh their page.

I make the AJAX call however the outcome is not what is expected:

HTML FORM:

  <div id="testDiv">

  </div>

AJAX:

$('#signupForm input[type=text]').keyup(function() {
            var usernameField = $('#usernameField').val(); // Retrieved from SignUpForm in forms.py, and has id of usernameField
            var emailField = $('#emailField').val(); // Retrieved from SignUpForm in forms.py, and has id of emailField
            var passwordField = $('#passwordField').val(); // Retrieved from SignUpForm in forms.py, and has id of passwordField
            var confirmPasswordField = $('confirmPasswordField').val(); // Retrieved from SignUpForm in forms.py, and has id of confirmPasswordField

            $.ajax({
                url: '/users/signupval/',
                data: {
                    'usernameField': usernameField,
                    'emailField': emailField,
                    'passwordField': passwordField,
                    'confirmPasswordField': confirmPasswordField,
                },
                dataType: 'json',
                success: function(data) {
                    $('#testDiv').text(data['message']);
                    console.log("Worked!")
                },
                error: function(err) {
                    console.log(err)
                }
            })
        })

views.py:

def signupval(request):
    form = SignUpForm(request.GET)
    if form.is_valid():
        usernameField = form.cleaned_data.get('usernameField')
        emailField = form.cleaned_data.get('emailField')
        passwordField = form.cleaned_data.get('passwordField')
        confirmPasswordField = form.cleaned_data.get('confirmPasswordField')

        if len(usernameField) > 7:
            return JsonResponse({'message': 'Username field > 7'})
        elif len(emailField) > 5:
            return JsonResponse({'message': 'Email field > 7'})
        elif len(passwordField) > 6:
            return JsonResponse({'message': 'Password field > 7'})
        elif len(confirmPasswordField) > 6:
            return JsonResponse({'message': 'Password field > 7'})
    else:
        return JsonResponse({'error': 'Something Failed. Please try again'})

The message property is passed back to AJAX and I want to display the message in the div I have (testDiv), however the div is empty and has no text. I know the success function is being called because in my Javascript console via Chrome, I see the `console.log("Worked!"). Does anybody know the issue of why the message is not being displayed? Thank you.

You make an Ajax call on every keypress? Why are you not just doing the validation on the client? Debug it with console.log, look at what is sent to the server, what is returned (network tab) — epascarello, Mar 04 '20 at 18:25
@epascarello Every time a user types something in my form, I check if it meets the requirements? What alternative do you have to this? — NodeReact020, Mar 04 '20 at 18:28
A fast typer is going to make tons of http requests at once. It is a bad idea. You have basic validation to check lengths, it should be done on the clientside and the serverside. HTML 5 validation is simple to hook up https://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5 — epascarello, Mar 04 '20 at 18:30
@epascarello No no. The check lengths functionality is just to test the AJAX. I am going to replace it with other stuff later, I just wanted to ensure AJAX is working. — NodeReact020, Mar 04 '20 at 18:32
@epascarello But what I am saying is that why isn't the text displaying in the testDiv? — NodeReact020, Mar 04 '20 at 18:32
@epascarello It should be. The console.log message is appearing in the js console. — NodeReact020, Mar 04 '20 at 18:32
I do not know, you need to debug what `data` is.... `console.log(data)` Is it what you expect? — epascarello, Mar 04 '20 at 18:33
@epascarello Oh no it says `Something Failed. Please try again`. Which is the error returned when my Django form is invalid. — NodeReact020, Mar 04 '20 at 18:38
@epascarello I do not type in any invalid data in the form, so do you no why the **form.is_valid()** is not being called, and the else statement to this is being called. — NodeReact020, Mar 04 '20 at 18:39

Django - Ajax call outputting nothing

0 Answers0