Member_2_5230414
asked on
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_resu lt" id="username_avail_result" ></div>
Password
<input type="text" name="password" id="password" />
<div class="password_strength" id="password_strength"></d iv>
<input type="text" name="username" id="username" />
<div class="username_avail_resu
Password
<input type="text" name="password" id="password" />
<div class="password_strength" id="password_strength"></d
$(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'
}
}
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
All the best, ~Ray
ASKER
Thanks for teaching me how to fish ;)