[MOD] Ajax Username Checker

[whonderbah]

Hi,

I've a problem, the is working very well but i realized that the verification was changing when you click the image after i made this mod it didn't change when you click it. I think the problem is about java..

Can you help me?

Thank you

[Hoelsch]

Hi,

very nice Mod! It's working fine for me!

Is it possible to use it for Password and E-Mail verification, too? And if it's possible what do I have to do?

Greetz

Hoelsch

[www.katzen.ag]

Funktioniert auch mit Version 1.7.1

[x23piracy]

Hi,

for disabling the submit button until the choosen username is free add this:

search for:

Code: [Select]

$("#username").blur(function()
add above:

Code: [Select]

$("#submitButton").attr("disabled", "true");
search for:

Code: [Select]

$(this).html('vergeben!').addClass('messageboxerror').fadeTo(900,1);
add below [Thanks to zhono for his fix]:

Code: [Select]

$("#submitButton").attr("disabled", "true");
search for:

Code: [Select]

 $(this).html('Verfügbar').addClass('messageboxok').fadeTo(900,1);
add below:

Code: [Select]

 $('#submitButton').removeAttr('disabled');
add this to the input submit tag:

Code: [Select]

id="submitButton"

i would like to know more about jquery and the syntax... so the hole form can be blocked
until it's filled out completely... i don't know, who knows?


Greetz X23

[zhono]

Excellent mod. One thing though. If you click away from the username box, but leave it blank, it will say that the username is available. Any way to get it to instead say "Please enter a username"?

*EDIT*

Figured it out myself.

In user_availability.php

Replace:
if (isset($HTTP_POST_VARS['user_name'])) {

With:
if (isset($HTTP_POST_VARS['user_name']) && !empty($HTTP_POST_VARS['user_name'])) {

Replace:
}
?>

With:
} else {

echo "blank";
}
?>

In register_form.html

Replace:

  if(data=='no') //if username not avaiable

With:

      if(data=='blank') //if username not entered

  {

  

$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox

{ 

  //add message and change the class of the box and start fading

  $(this).html('Please enter a username').addClass('messageboxerror').fadeTo(900,1);

});

          }

  else if(data=='no') //if username not avaiable

Now if you don't enter a username, it'll tell you so.

[x23piracy]

Excellent mod. One thing though. If you click away from the username box, but leave it blank, it will say that the username is available. Any way to get it to instead say "Please enter a username"?

Hi,

first of all i don't have the solution yet but it would be nice if the user enters the
username field that he cannot leave it until he entered a username with a length of X

Go go Lucifix go luci go  


Greetz X23

[zhono]

Good idea. Maybe I can do that one myself too. Also, that last mod that you posted, if a user enters an available name, it will activate the submit button. Then he can go back and change to a name that is taken, and the submit button will still work.

So just do this.

*EDIT* Modified the code one more time, check my next post.

[x23piracy]

Hi,

that last mod that you posted...
So just do this.

thank you for the fix, i have updated my post with the change and a credit.

And require a username to be between X and X characters long, do this:

Thank you again i test this later.  


Greetz X23

[zhono]

And here is my final contribution to this great mod. Here's what it does:

• Check username to see if it exists
• Require username to be between X and X characters long
• Warns user if the username field is left blank
• Require the password to be between X and X characters long
• Warns user if the password field is left blank
• Make sure the email is someone@domain.com
• Make sure the email isn't already registed in your gallery.
• Warns user if the email field is left blank
• Submit button says "Disabled" and can't be clicked, until all items are entered correctly, then changes to "Register" and can be clicked.

After installing the original mod from Lucifix:

In page_header.php REPLACE:

Code: [Select]

 "url_user_availability" => $site_sess->url(ROOT_PATH."user_availability.php", "&"),
With:

Code: [Select]

 "url_user_availability" => $site_sess->url(ROOT_PATH."user_availability.php?check=username", "&"),
  "url_user_email" => $site_sess->url(ROOT_PATH."user_availability.php?check=email", "&"),
  "url_user_password" => $site_sess->url(ROOT_PATH."user_availability.php?check=password", "&"),
In register_form.html

REPLACE the original javascript at the top with this:

Code: [Select]

<script language="javascript">
//<!---------------------------------+
//  Developed by Roshan Bhattarai
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
//  Extensive additions by Zhono
// --------------------------------->

$(document).ready(function()
{
var userOk = 0;
var passOk = 0;
var emailOk = 0;
$("#submitButton").attr("value", "Disabled");
$("#submitButton").attr("disabled", "true");
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_availability}",{ user_name:$(this).val() } ,function(data)
        {
     if(data=='userblank') //if username not entered
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else if(data=='userlength') //if username is less than 6 or more than 20 characters
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_length}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else if(data=='userno') //if username not avaiable
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_taken}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else
 {
  $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_good}').addClass('messageboxok').fadeTo(900,1);
 
});
userOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
});
$("#userpassword").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgboxpass").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_password}",{ user_password:$(this).val() } ,function(data)
        {
     if(data=='passblank') //if username not entered
 {
  $("#msgboxpass").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
passOk = 0;
          }
 else if(data=='passlength') //if username is less than 6 or more than 20 characters
 {
  $("#msgboxpass").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_length}').addClass('messageboxerror').fadeTo(900,1);
 
});
passOk = 0;
          }
 else
 {
  $("#msgboxpass").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_good}').addClass('messageboxok').fadeTo(900,1);
 
});
passOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
});
$("#useremail").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgboxemail").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_email}",{ user_email:$(this).val() } ,function(data)
        {
     if(data=='emailblank') //if username not entered
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else if(data=='emailinvalid') //if username is less than 6 or more than 20 characters
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_invalid}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else if(data=='emailno') //if username not avaiable
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_taken}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else
 {
  $("#msgboxemail").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_good}').addClass('messageboxok').fadeTo(900,1);
 
});
emailOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
 
});
});
</script>
REPLACE:

Code: [Select]

<input type="password" name="user_password" size="30" class="input" />
With:

Code: [Select]

<input type="password" name="user_password" size="30" class="input"  id="userpassword" /><span id="msgboxpass" style="display:none"></span>
REPLACE:

Code: [Select]

<input type="text" name="user_email" size="30" class="input" value="{user_email}" />
With:

Code: [Select]

<input type="text" name="user_email" size="30" class="input" value="{user_email}" id="useremail" /><span id="msgboxemail" style="display:none"></span>
REPLACE:

Code: [Select]

<input type="submit" value="{lang_submit}" class="button" />
With:

Code: [Select]

<input type="submit" value="{lang_submit}" class="button" id="submitButton" />
In lang/english/main.php

Find

Code: [Select]

?>
Before ADD:

Code: [Select]

//----------------------------------------------------------
//-- Mod Ajax Registration Checker --
//----------------------------------------------------------
$lang['ajax_username_empty'] = "Please enter a username";
$lang['ajax_username_length'] = "Username must be between 6 and 20 characters long";
$lang['ajax_username_taken'] = "This User name already exists";
$lang['ajax_username_good'] = "Username available to register";
$lang['ajax_password_empty'] = "Please enter a password";
$lang['ajax_password_length'] = "Password must be between 6 and 20 characters long";
$lang['ajax_password_good'] = "Password is good";
$lang['ajax_email_empty'] = "Please enter an email address";
$lang['ajax_email_invalid'] = "This email address is invalid!";
$lang['ajax_email_taken'] = "This email address is already registered";
$lang['ajax_email_good'] = "Email address is good to go";
In register.php

Find:

Code: [Select]

      "captcha_registration" => (bool)$captcha_enable_registration
Replace with:

Code: [Select]

     "captcha_registration" => (bool)$captcha_enable_registration,
      "lang_ajax_username_empty" => $lang['ajax_username_empty'],
      "lang_ajax_username_length" => $lang['ajax_username_length'],
      "lang_ajax_username_taken" => $lang['ajax_username_taken'],
      "lang_ajax_username_good" => $lang['ajax_username_good'],
      "lang_ajax_password_empty" => $lang['ajax_password_empty'],
      "lang_ajax_password_length" => $lang['ajax_password_length'],
      "lang_ajax_password_good" => $lang['ajax_password_good'],
      "lang_ajax_email_empty" => $lang['ajax_email_empty'],
      "lang_ajax_email_invalid" => $lang['ajax_email_invalid'],
      "lang_ajax_email_taken" => $lang['ajax_email_taken'],
      "lang_ajax_email_good" => $lang['ajax_email_good']
And finally, REPLACE you entire user_availability.php with this:

Code: [Select]

<?php
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
//  Extensive additions by Zhono

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');
require(ROOT_PATH.'includes/sessions.php');

if ($_GET['check'] == "username") {
if (isset($HTTP_POST_VARS['user_name']) && !empty($HTTP_POST_VARS['user_name'])) {
$user_name = preg_replace("/[ ]{2,}/", " ", un_htmlspecialchars(trim($HTTP_POST_VARS['user_name'])));
//username length
$MIN_LENGTH = 6;
$MAX_LENGTH = 20;
if ((strlen($user_name) < $MIN_LENGTH) || (strlen($user_name) > $MAX_LENGTH)) {
     echo "userlength";
   } else {

if ($user_name != "") {
  $sql = "SELECT ".get_user_table_field("", "user_name")."
  FROM ".USERS_TABLE."
  WHERE ".get_user_table_field("", "user_name")." = '".strtolower($user_name)."'";
  if ($site_db->not_empty($sql)) {
//user name is not availble
echo "userno";
  } else {
//user name is available
echo "useryes";   
}
}
  }
} else {
echo "userblank";
}
}

if ($_GET['check'] == "password") {
if (isset($HTTP_POST_VARS['user_password']) && !empty($HTTP_POST_VARS['user_password'])) {
$user_password = preg_replace("/[ ]{2,}/", " ", un_htmlspecialchars(trim($HTTP_POST_VARS['user_password'])));
//password length
$MIN_LENGTH = 6;
$MAX_LENGTH = 20;
if ((strlen($user_password) < $MIN_LENGTH) || (strlen($user_password) > $MAX_LENGTH)) {
     echo "passlength";
   } else {
   echo "passyes";
  }
} else {
echo "passblank";
}
}

if ($_GET['check'] == "email") {
if (isset($HTTP_POST_VARS['user_email']) && !empty($HTTP_POST_VARS['user_email'])) {

$user_email = $HTTP_POST_VARS['user_email'];

if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $user_email)){
echo "emailinvalid";
} else {

if ($user_email != "") {
  $sql = "SELECT ".get_user_table_field("", "user_email")."
  FROM ".USERS_TABLE."
  WHERE ".get_user_table_field("", "user_email")." = '".strtolower($user_email)."'";
  if ($site_db->not_empty($sql)) {
//user name is not availble
echo "emailno";
  } else {
//user name is available
echo "emailyes";   
}
}
  }
} else {
echo "emailblank";
}
}
?>
That should do it. To change the allowed length of the username and password:

In user_availability.php FIND:

Code: [Select]

//username length
$MIN_LENGTH = 6;
$MAX_LENGTH = 20;and

Code: [Select]

//password length
$MIN_LENGTH = 6;
$MAX_LENGTH = 20;
Change 6 to your desired minimum number of characters, and change 20 the the max allowed characters.

Done!

*EDIT* Oh, and Lucifix, feel free to update your original post with this new version if you want. That way, people won't have to install it, and then update it to this.

[zhono]

The above post has been updated to allow the Submit button to be disabled until all fields are entered correctly.

[x23piracy]

The above post has been updated to allow the Submit button to be disabled until all fields are entered correctly.

Hi,

please paste the code source clean so they can be copy and pasted, there are much breaks
after each line if you paste that... i found that different times in other MOD's.

It's a pain to remove those unneeded line breaks.

For example:

Code: [Select]

{



  //add message and change the class of the box and start fading



  $(this).html('This email address is already registered').addClass('messageboxerror').fadeTo(900,1);



  



});



emailOk = 0;


Greetz X23

[zhono]

Sorry about that. Forgot to use code tags instead of php tags. Should be fixed now.

[x23piracy]

Sorry about that. Forgot to use code tags instead of php tags. Should be fixed now.

Hi,

thx the code seems to work good just tested it a few times worked...
What about language tags?


Greetz X23

[zhono]

I tried using language tags already, and they wouldn't work inside the javascript. Maybe I overlooked something. I have some personal stuff going on right now, so I can't work on it at the moment. If someone else wants to have a look at that, obviously they are free to. If I can sort out my personal stuff, I'll try again, but it's not likely to be soon.

[zhono]

I updated my code above to include language tags. If you are already using the code, here are the changes.

In lang/english/main.php

Find:

Code: [Select]

?>
Before ADD:

Code: [Select]

//----------------------------------------------------------
//-- Mod Ajax Registration Checker --
//----------------------------------------------------------
$lang['ajax_username_empty'] = "Please enter a username";
$lang['ajax_username_length'] = "Username must be between 6 and 20 characters long";
$lang['ajax_username_taken'] = "This User name already exists";
$lang['ajax_username_good'] = "Username available to register";
$lang['ajax_password_empty'] = "Please enter a password";
$lang['ajax_password_length'] = "Password must be between 6 and 20 characters long";
$lang['ajax_password_good'] = "Password is good";
$lang['ajax_email_empty'] = "Please enter an email address";
$lang['ajax_email_invalid'] = "This email address is invalid!";
$lang['ajax_email_taken'] = "This email address is already registered";
$lang['ajax_email_good'] = "Email address is good to go";
In register.php

Find:

Code: [Select]

     "captcha_registration" => (bool)$captcha_enable_registration
Replace with:

Code: [Select]

     "captcha_registration" => (bool)$captcha_enable_registration,
      "lang_ajax_username_empty" => $lang['ajax_username_empty'],
      "lang_ajax_username_length" => $lang['ajax_username_length'],
      "lang_ajax_username_taken" => $lang['ajax_username_taken'],
      "lang_ajax_username_good" => $lang['ajax_username_good'],
      "lang_ajax_password_empty" => $lang['ajax_password_empty'],
      "lang_ajax_password_length" => $lang['ajax_password_length'],
      "lang_ajax_password_good" => $lang['ajax_password_good'],
      "lang_ajax_email_empty" => $lang['ajax_email_empty'],
      "lang_ajax_email_invalid" => $lang['ajax_email_invalid'],
      "lang_ajax_email_taken" => $lang['ajax_email_taken'],
      "lang_ajax_email_good" => $lang['ajax_email_good']
And then once again replace the whole javascript in register_form.html with this:

Code: [Select]

<script language="javascript">
//<!---------------------------------+
//  Developed by Roshan Bhattarai
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
//  Extensive additions by Zhono
// --------------------------------->

$(document).ready(function()
{
var userOk = 0;
var passOk = 0;
var emailOk = 0;
$("#submitButton").attr("value", "Disabled");
$("#submitButton").attr("disabled", "true");
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_availability}",{ user_name:$(this).val() } ,function(data)
        {
     if(data=='userblank') //if username not entered
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else if(data=='userlength') //if username is less than 6 or more than 20 characters
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_length}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else if(data=='userno') //if username not avaiable
 {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_taken}').addClass('messageboxerror').fadeTo(900,1);
 
});
userOk = 0;
          }
 else
 {
  $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_username_good}').addClass('messageboxok').fadeTo(900,1);
 
});
userOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
});
$("#userpassword").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgboxpass").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_password}",{ user_password:$(this).val() } ,function(data)
        {
     if(data=='passblank') //if username not entered
 {
  $("#msgboxpass").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
passOk = 0;
          }
 else if(data=='passlength') //if username is less than 6 or more than 20 characters
 {
  $("#msgboxpass").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_length}').addClass('messageboxerror').fadeTo(900,1);
 
});
passOk = 0;
          }
 else
 {
  $("#msgboxpass").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_password_good}').addClass('messageboxok').fadeTo(900,1);
 
});
passOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
});
$("#useremail").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgboxemail").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_email}",{ user_email:$(this).val() } ,function(data)
        {
     if(data=='emailblank') //if username not entered
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_empty}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else if(data=='emailinvalid') //if username is less than 6 or more than 20 characters
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_invalid}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else if(data=='emailno') //if username not avaiable
 {
  $("#msgboxemail").fadeTo(200,0.1,function() //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_taken}').addClass('messageboxerror').fadeTo(900,1);
 
});
emailOk = 0;
          }
 else
 {
  $("#msgboxemail").fadeTo(200,0.1,function()  //start fading the messagebox
{
 //add message and change the class of the box and start fading
 $(this).html('{lang_ajax_email_good}').addClass('messageboxok').fadeTo(900,1);
 
});
emailOk = 1;
 if (userOk==1 && passOk==1 && emailOk==1) {
 $("#submitButton").attr("value", "Register");
 $('#submitButton').removeAttr('disabled');
 } else {
$("#submitButton").attr("disabled", "true");
$("#submitButton").attr("value", "Disabled");
}
 }

        });
 
});
});
</script>

And then just edit the language tags to suit your needs, obviously.