Mark Kang Mark Kang - 1 year ago 132
jQuery Question

Django user signup / registration form not working

I made a sign up form following a tutorial.

what im trying to do as you can see here is to have the data transferred and get an error or success message to the targeted div in response without refreshing the page.

i have set the 3 forms : email ,email2 and password in the index.html

but the site is not doing anything, and apparantly it doesn't work.

I am also getting the

TypeError: is not JSON serializable


I think im doing something wrong here.

can you explain to me what im doing is wrong?




// using jQuery
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));
return cookieValue;
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);


<div class="signup_div">
<form id="signup_form" method="post" action="">
{% csrf_token %}

<div class="field-wrap">
Email Address
<input required="" type="text" name="email" placeholder="Email address">

<div class="field-wrap">
Email Address
<input required="" type="text" name="email2" placeholder="Email address">

<div class="field-wrap">
<input required="" type="password" name="password" placeholder="Password">

<button class="ladda-button forgot" data-color="mint" data-style="slide-up"><a href=""><span class="ladda-label">Forgot Password?</span></a></p></button>

<button class="ladda-button button-primary login_button" data-style="slide-up"/><span class="ladda-label">Sign Up</span></button>



$('#signup_form').on('submit', function(e) { e.preventDefault()
formdata = $('#signup_form').serialize(); formdata.csrfmiddlewaretoken = '{{ csrf_token }}';
data: formdata,
url: '{% url 'signup' %}',
error: function(response){
success: function(response){
// do something with response

def ajax_signup(request):
form = UserSignupForm(request.POST or None)
if form.is_valid():
user =
password = form.cleaned_data.get('password')

new_user = authenticate(username=user.username, password=password)
login(request, new_user)
data = {'form': form, 'success': 'success'}
else: data = {'form': form, 'error': 'error'}

return HttpResponse(json.dumps(data), content_type='application/json')


from django import forms
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, get_user_model, login, logout

class UserSignupForm(forms.ModelForm):
email = forms.EmailField(label='Confirm Email')
email2 = forms.EmailField(label='Confirm Email')
password = forms.CharField(widget=forms.PasswordInput)
class Meta:
model = User
fields = [
def clean_email(self):
email = self.cleaned_data.get('email')
email2 = self.cleaned_data.get('email2')
if email != email2:
raise forms.ValidationError("Emails must match")
email_qs = User.objects.filter(email=email)
if email_qs.exists():
raise forms.ValidationError("This email has already been registered")
return email

Answer Source

As correctly pointed out by Nikhil, you are trying to serialize a form instance. Instead, you should serialize the form data.

From the Django Docs:

Whatever the data submitted with a form, once it has been successfully validated by calling is_valid() (and is_valid() has returned True), the validated form data will be in the form.cleaned_data dictionary.

Also, form.cleaned_data will not be available if is_valid() does not return True. You can instead use request.POST

Instead of:

    data = {'form': form, 'success': 'success'}
else: data = {'form': form, 'error': 'error'}

You want to do:

    data = {'form': form.cleaned_data, 'success': 'success'}
    data = {'form': request.POST, 'error': 'error'}