Created
January 6, 2012 18:58
-
-
Save katjakarhu/1571912 to your computer and use it in GitHub Desktop.
Realtime Pinax signup validation with jQuery and Dajax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // $(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