Validating Password

Question

I'm trying to validate a password using javascript, It's to make sure that when changing the password, the new password entered is equal to that of the re-entering of the new password (user is asked to enter their new password twice so both have to match) but at the same time, i want to make sure that the new password is at least 6 characters long, I have these functions separately but don't know how to combine them... thanks for help in advance!

This is what i have so far...

This is to make sure the new passwords match:

function validatePassword()
 {
 var new_password = document.getElementById("new_password").value;
 var confirm_new_password = document.getElementById("confirm_new_password").value;
 <!-- if they match, go to next page -->
 if ( new_password == confirm_new_password)
 {
 return true;
 }
 <!-- if they don't match, an error message is displayed -->
 else
 {
 alert("Passwords do not match.");
 }
 return false;
 }

This is for length of password:

 function validatePassword()
 {
 if (document.getElementById("new_password").value.length < "5")
 {
 <!--If pasword is less than 5 characters long, display error message-->
 alert("Please ensure your password is at least 6 characters long.");
 return false;
 }
 return true;
 }

How do i combine both of these to form a SINGLE function where the two new passwords are checked so that they match, and also check that they are longer than 6 characters?

• Adam Hopkinson: FYI, Dropbox released their password validation js and it's by far the best I've seen - tech.dropbox.com/2012/04/…

Answer 1

To just combine your two functions, this would work:

function validatePassword()
{
 var new_password = document.getElementById("new_password").value;
 var confirm_new_password = document.getElementById("confirm_new_password").value;
 if (new_password.length < 5)
 {
 <!--If pasword is less than 5 characters long, display error message-->
 alert("Please ensure your password is at least 6 characters long.");
 return false;
 }
 else if ( new_password != confirm_new_password)
 {
 alert("Passwords do not match.");
 return false;
 }
 else
 {
 return true;
 }
 }

Although I agree, there are better procedures out there. And please, make sure you're doing server-side validation as well since client-side validation is very easy to skip around.

• user1930227: Thanks for the help, this is for my school project so I'm very new to this, but thanks for the advice!
• sgeddes: @user1930227 -- np, glad we could help. never too early to start learning best practices though. best of luck.
• user1930227: There's a slight issue, it works fine though when a password longer than 6 characters is entered in, though the two passwords do not match, the update is still made. for example: if new_password = abcdefg (longer than 6) and confirm_password = abc (not the same), the password is updated
• sgeddes: @user1930227 -- i updated the answer -- copied and pasted too fast (I assume you were still being prompted)...
• user1930227: aha thanks, i just fixed it myself (pretty proud of myself on that one) ahah, thanks for the help! :)

Answer 2

i m not sure but you can call validatePassword() this function inside

if ( new_password == confirm_new_password)
{
 validatePassword();
}

Answer 3

You have two options, either make the two functions a single function, or make them two separate functions and call them both before you submit / process your form.

if (validatePasswordLength() && validatePasswordsMatch()) {
 // Continue
}

• user1930227: I'd prefer to make the two functions into a single function, the second function is from another page that I have.

Answer 4

you have to try this code that is small and working.

if(document.getElementById("new_password").value != document.getElementById("confirm_new_password").value){
 alert("Passwords do not match.");
 return false;
}

Answer 5

<script>
function validatePassword()
 {
 var new_password = document.getElementById("new_password").value;
 var confirm_new_password = document.getElementById("confirm_new_password").value;
 if (document.getElementById("new_password").value.length < "5")
 {
 alert("Please ensure your password is at least 6 characters long.");
 return false;
 }
 if (new_password == confirm_new_password)
 {
 alert("Password no match");
 return false;
 }
 return true;
 }
</script>
<form action="" onsubmit="return validatePassword()">
<p>New Password: <input type="password" id="new_password" name="new_password" /></p>
<p>Confirm Password: <input type="password" id="confirm_new_password" name="confirm_new_password" /></p>
<p><input type="submit" value="submit" /></p>
</form>