Live User Name Check In Php Using Javascript

Live User Name Check In Php Using Javascript

ajax username availability php,live username checker, live username availability checking using ajax, password strength indicator,check password strength,check password normal,middle,strong,check username availability using ajax and php.

Live User name check in php using javascript,jquery,ajax

index.php

.success{
    color:#009900;
}
.error{
    color:#F33C21;
}
.talign_right{
    text-align:right;
}
.username_avail_result{
    display:block;
    width:180px;
}
.strength {
    display:block;
    width:180px;
    padding:3px;
    text-align:center;
    color:#333;
    font-size:12px;
    backface-visibility:#FFF;
    font-weight:bold;
}
/* Password strength indicator classes weak, normal, strong, verystrong*/
.strength.weak{
    background:#e84c3d;
}
.strength.normal{
    background:#f1c40f;
}
.strength.strong{
    background:#27ae61;
}
.strength.verystrong{
    background:#2dcc70;
    color:#FFF;
}

</style>
<div class="as_wrapper">
    <h1>Live uername check and password strent check</h1>
    <br/><br/>
    <table class="mytable">
    <tr>
        <td class="talign_right">Username</td>
        <td><input type="text" name="username" id="username" /></td>
        <td><div class="username_avail_result" id="username_avail_result"></div></td>
    </tr>
    <tr>
        <td class="talign_right">Password</td>
        <td><input type="text" name="password" id="password" /></td>
        <td><div class="strength" id="strength"></div></td>
    </tr>
    </table>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#username').keyup(function(){ 
        var Username = $(this).val(); 
        var UsernameAvailResult = $('#username_avail_result'); 
        if(Username.length > 2) { 
            UsernameAvailResult.html('Loading..'); 
            var UrlToPass = 'action=username_availability&username='+Username;
            $.ajax({ // Send the username val to another checker.php using Ajax in POST menthod
            type : 'POST',
            data : UrlToPass,
            url  : 'ajax.php',
            success: function(responseText){ // Get the result and asign to each cases
                if(responseText == 0){
                    UsernameAvailResult.html('<span class="success">Username name available</span>');
                }
                else if(responseText > 0){
                    UsernameAvailResult.html('<span class="error">Username already taken</span>');
                }
                else{
                    alert('Problem with sql query');
                }
            }
            });
        }else{
            UsernameAvailResult.html('Enter atleast 3 characters');
        }
        if(Username.length == 0) {
            UsernameAvailResult.html('');
        }
    });
    
    $('#password, #username').keydown(function(e) { // Dont allow users to enter spaces for their username and passwords
        if (e.which == 32) {
            return false;
          }
    });
    $('#password').keyup(function() { // As same using keyup function for get user action in input
        var PasswordLength = $(this).val().length; // Get the password input using $(this)
        var PasswordStrength = $('#strength'); // Get the id of the password indicator display area
        
        if(PasswordLength <= 0) { // Check is less than 0
            PasswordStrength.html(''); // Empty the HTML
            PasswordStrength.removeClass('normal weak strong verystrong'); //Remove all the indicator classes
        }
        if(PasswordLength > 0 && PasswordLength < 4) { // If string length less than 4 add 'weak' class
            PasswordStrength.html('weak');
            PasswordStrength.removeClass('normal strong verystrong').addClass('weak');
        }
        if(PasswordLength > 4 && PasswordLength < 8) { // If string length greater than 4 and less than 8 add 'normal' class
            PasswordStrength.html('Normal');
            PasswordStrength.removeClass('weak strong verystrong').addClass('normal');            
        }    
        if(PasswordLength >= 8 && PasswordLength < 12) { // If string length greater than 8 and less than 12 add 'strong' class
            PasswordStrength.html('Strong');
            PasswordStrength.removeClass('weak normal verystrong').addClass('strong');
        }
        if(PasswordLength >= 12) { // If string length greater than 12 add 'verystrong' class
            PasswordStrength.html('Very Strong');
            PasswordStrength.removeClass('weak normal strong').addClass('verystrong');
        }
    });
});
</script>

Create file ajax.php

insert the following code

mysql_connect("localhost", "root", "") or die ("Server not connected"); // Connect to the host
mysql_select_db("mydb") or die ("DB not connected"); // select the database

if(isset($_POST['action']) && $_POST['action'] == 'username_availability'){ // Check for the username posted
	$username 		= htmlentities($_POST['username']); // Get the username values
	$check_query	= mysql_query('SELECT username FROM users WHERE username = "'.$username.'" '); // Check the database
	echo mysql_num_rows($check_query); // echo the num or rows 0 or greater than 0
}

Database

crate data name mydb and run in this code

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `status` int(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
);
INSERT INTO `users` (`id`, `username`, `status`) VALUES
(1, 'pramod', 1),
(2, 'kumawat', 1),
(3, 'demo', 1),
(4, 'mytest', 1);


Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates