Skip to content

Instantly share code, notes, and snippets.

@katjakarhu
Created January 6, 2012 18:58
Show Gist options
  • Select an option

  • Save katjakarhu/1571912 to your computer and use it in GitHub Desktop.

Select an option

Save katjakarhu/1571912 to your computer and use it in GitHub Desktop.
Realtime Pinax signup validation with jQuery and Dajax
import re
from django.utils import simplejson
from django.contrib.auth.models import User
from django.core.validators import email_re
from dajaxice.decorators import dajaxice_register
from emailconfirmation.models import EmailAddress
alnum_re = re.compile(r"^\w+$")
def _is_valid_email(email):
return email_re.match(email)
@dajaxice_register
def email_available(request, email):
email = email.strip()
if not _is_valid_email(email):
return simplejson.dumps({"type": "email", "exists": "NotValid"})
elif EmailAddress.objects.filter(email=email, verified=True).exists():
return simplejson.dumps({"type": "email", "exists": "True"})
return simplejson.dumps({"type": "email", "exists": "False"})
@dajaxice_register
def username_available(request, username):
if not alnum_re.search(username):
return simplejson.dumps({"type": "username", "exists": "NotValid"})
elif User.objects.filter(username=username).exists():
return simplejson.dumps({"type": "username", "exists": "True"})
return simplejson.dumps({"type": "username", "exists": "False"})
// $(function(){
// $("#id_username").focus();
// });
function dajax_callback(data){
if ((data.type) == "email" ) {
var input_item = "input[name=email]";
var label_item = "label[for=id_email]";
}
else if ((data.type) == "username" ) {
var input_item = "input[name=username]";
var label_item = "label[for=id_username]";
}
if(data.exists == "True") {
$(label_item).css('color', '#b94a48');
$(input_item).css('border-color', '#ee5f5b');
$(input_item).next('.help-block-inline').remove();
if ((data.type) == "email" ) {
$('<span class="help-block-inline error">{% trans "This email has already been registered. Try logging in instead." %}</span>').insertAfter(input_item);
}
else if ((data.type) == "username" ) {
$('<span class="help-block-inline error">{% trans "This username has already been selected. Please select another username." %}</span>').insertAfter(input_item);
}
}
else if (data.exists == "False") {
$(label_item).css('color', 'black');
$(input_item).css('color', 'black');
$(input_item).css('border-color', 'black');
$(input_item).next('.help-block-inline').remove();
}
else if (data.exists == "NotValid") {
$(label_item).css('color', '#b94a48');
$(input_item).css('border-color', '#ee5f5b');
$(input_item).next('.help-block-inline').remove();
if ((data.type) == "email" ) {
$('<span class="help-block-inline error">{% trans "Not a valid email address." %}</span>').insertAfter(input_item);
}
else if ((data.type) == "username" ) {
$('<span class="help-block-inline error">{% trans "Usernames can only contain letters, numbers and underscores.c." %}</span>').insertAfter(input_item);
}
}
};
function select_action(input_item) {
if (input_item == 'email') {
Dajaxice.myapp.email_available(dajax_callback, {'email':$('input[name=email]').val()}); }
else if (input_item == 'username') {
Dajaxice.myapp.username_available(dajax_callback, {'username':$('input[name=username]').val()});
}
else if (input_item == 'password1' || input_item == 'password2') {
var value1 = $("input[name=password1]").val();
var value2 = $("input[name=password2]").val();
if (value1 == '') {
$("input[name=password1]").next('.help-block-inline').remove();
$("input[name=password1]").after('<span class="help-block-inline error">Please enter a password.</span>');
} else if (value2 == '') {
$("input[name=password2]").next('.help-block-inline').remove();
$("input[name=password2]").after('<span class="help-block-inline error">Please re-enter your password.</span>');
} else if (value1 != value2 ) {
$("input[name=password2]").next('.help-block-inline').remove();
$("input[name=password2]").after('<span class="help-block-inline error">Passwords do not match.</span>');
} else if (value1 == value2) {
$("label[for=id_password1]").css('color', 'black');
$("label[for=id_password2]").css('color', 'black');
$("input[name=password1]").css('color', 'black');
$("input[name=password1]").css('border-color', 'black');
$("input[name=password2]").css('color', 'black');
$("input[name=password2]").css('border-color', 'black');
$("input[name=password1]").next('.help-block-inline').remove();
$("input[name=password2]").next('.help-block-inline').remove();
}
}
};
$('input').focusout(function() {
var name = this.name;
select_action(name);
});
$('input').focusin(function () {
var name = this.name;
select_action(name);
});
$('form#signup_form').submit(function() {
if ($("form#signup_form span.help-block-inline.error").text())
return false;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment