• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

javascript not working - password strength

Im trying to check a strength of a password but it does not seem to do anything on the page

          Email
      <input type="text" name="username" id="username" />
       <div class="username_avail_result" id="username_avail_result"></div>
    Password
     <input type="text" name="password" id="password" />
     <div class="password_strength" id="password_strength"></div>


$(document).ready(function(){
	$('#username').keyup(function(){ // Keyup function for check the user action in input
		var Username = $(this).val(); // Get the username textbox using $(this) or you can use directly $('#username')
		var UsernameAvailResult = $('#username_avail_result'); // Get the ID of the result where we gonna display the results
		if(Username.length > 2) { // check if greater than 2 (minimum 3)
			UsernameAvailResult.html('Loading..'); // Preloader, use can use loading animation here
			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  : 'Username_Checker/checker.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()
	{
		$('#password_strength').html(checkStrength($('#password').val()))
	})	
	
	/*
		checkStrength is function which will do the 
		main password strength checking for us
	*/
	
	function checkStrength(password)
	{
		//initial strength
		var strength = 0
		
		//if the password length is less than 6, return message.
		if (password.length < 6) { 
			$('#password_strength).removeClass()
			$('#password_strength').addClass('short')
			return 'Too short' 
		}
		
		//length is ok, lets continue.
		
		//if length is 8 characters or more, increase strength value
		if (password.length > 7) strength += 1
		
		//if password contains both lower and uppercase characters, increase strength value
		if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
		
		//if it has numbers and characters, increase strength value
		if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
		
		//if it has one special character, increase strength value
		if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
		
		//if it has two special characters, increase strength value
		if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
		
		//now we have calculated strength value, we can return messages
		
		//if value is less than 2
		if (strength < 2 )
		{
			$('#password_strength').removeClass()
			$('#password_strength').addClass('weak')
			return 'Weak'			
		}
		else if (strength == 2 )
		{
			$('#password_strength').removeClass()
			$('#password_strength').addClass('good')
			return 'Good'		
		}
		else
		{
			$('#password_strength').removeClass()
			$('#password_strength').addClass('strong')
			return 'Strong'
		}
	}
});

Open in new window

0
runnerjp2005
Asked:
runnerjp2005
  • 2
1 Solution
 
Ray PaseurCommented:
Have you tried looking at this with Chrome Dev Tools?  It usually will tell you exactly what statement is wrong.
https://developer.chrome.com/devtools
0
 
runnerjp2005Author Commented:
Missed a ' out on line53.

Thanks for teaching me how to fish ;)
0
 
Ray PaseurCommented:
Thanks for the points.  The Dev Tools are just excellent for dealing with anything in JS and CSS.  I'm amazed we didn't have them all along!

All the best, ~Ray
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now