Fancy Login

[doddsey_65]

Hi, ium trying to make a login page but i want features such as while a user is typing in their username a box to the side lets them know if its available in real time. The same with the password, it will display their password strength. Now i have no idea what to type into google to get tutorials on this so can some one tell me what to type into google? or perhaps point me in the right direction.

[aeroswat]

As to whether the username is available or not you will need to use AJAX for. It may be pretty intense for the server depending on what kind of load you have as it will have to check every time the onkeyup even is triggered. The password won't need to use AJAX but it will have to check on the onkeyup event still.

[CONFUSIONUK]

I used both of these before if it's of any use to you 

 

Both of these use the jQuery framework...

Username Availability:

http://plugins.jquery.com/project/CheckAvailability

Password Strength:

http://plugins.jquery.com/project/password_strength

[The Little Guy]

This "should" work, I haven't tested it, but the theory behind it should work. If you get any errors post them if you don't know how to fix them.

 

This is all the code that is needed, not extra libraries or downloads.

 

HTML:

<input type="text" name="username" id="user" onkeyup="userExists(this.value);" />
<span id="suggest"></span>

 

Javascript:

function ajaxPost(){
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
var ajaxRequest;
try{
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			alert("Your Browser Doesn't support AJAX.");
			return false;
		}
	}
}
return Array(ajaxRequest,contentType);
}


function userExists(user){
var connect = ajaxPost();
var suggest = document.getElementById('suggest');
connect[0].onreadystatechange = function(){
	var good = false;
	if(connect[0].readyState == 4){
		eval(connect[0].responseText);
		if(good){
			opt = '<span class="good">This username is not taken</span>';
		}else{
			opt = '<span class="bad">This username is taken try another</span>';
		}
		suggest.innerHTML = opt;
	}
}
var va = 'user='+escape(user);
connect[0].open("POST", '/checkuser.php', true);
connect[0].setRequestHeader("Content-Type", connect[1]);
connect[0].send(va);
}

 

 

php (checkuser.php):

<?php
include 'db.php';
$user = mysql_real_escape_string($_POST['user']);
$sql = mysql_query("SELECT * FROM users WHERE `user` = '$user'");
if(mysql_num_rows($sql) > 0)
echo "good = false;";
else
echo "good = true;";
?>