Hi all,
I want to do some basic password validation when a user wants to change their password. The validation will be to check that the two password boxes match, which will be done dynamically with the result being shown in a div.

I can't get it to work, so I would appreciate any suggustions on how to do this.

Contents of my javascript file

function checkPass()
{

var newPassword = document.getElementById('newPassword.value');
var confirmPassword = document.getElementById('confirmPassword.value');

alert(newPassword);

if (newPassword ==confirmPassword)
{
	document.getElementByID('password_result').innerHTML='Passwords Match!'
}

else
{
	document.getElementbyId('password_result').innerHTML = "Passwords Do Not Match!"
}

Snip of the form where I am having this problem

		<div id="passwordCheck">
		<form name="password_form" action="" method="post">

	Current Password: <input type=password name=currentPassword /><br />
New Password:<br />

<input type=password name=newPassword onKeyUp="checkPass()" />

<br />
Re-enter Password:<br />
<input type=password name=confirmPassword onKeyUp="checkpass()" />

<br />
<input type="submit" value="Submit"><input type="reset" value="Reset" />

<div id="password_result">&nbsp;</div>

</form>
</div>

I look forward to any help given,

Cheers,

    Heres the fixed function:

    function checkPass()
{

var newPassword = document.password_form.newPassword.value;
var confirmPassword = document.password_form.confirmPassword.value;

if (newPassword == confirmPassword)
{
	document.getElementById('password_result').innerHTML='Passwords Match!'
}

else
{
	document.getElementById('password_result').innerHTML = "Passwords Do Not Match!"
}
}

    It was easier to just paste the code. You had couple of errors here and there. Be carefull with upper and lowercase because they matter (for example getelementbyid is not the same as getElementById).

    BTW, use Firebug to debug javascript errors. Its a must.

      	var newPassword = document.getElementById('newPassword.value');
	var confirmPassword = document.getElementById('confirmPassword.value');

      Your ".value"s are in the wrong place.

      	var newPassword = document.getElementById('newPassword').value;
	var confirmPassword = document.getElementById('confirmPassword').value;

        	var newPassword = document.getElementById('newPassword.value');
	var confirmPassword = document.getElementById('confirmPassword.value');

        Your ".value"s are in the wrong place.

        	var newPassword = document.getElementById('newPassword').value;
	var confirmPassword = document.getElementById('confirmPassword').value;

          Well that would still not help because theres no such inputs with id called "newPassword" or "confirmPassword" 🙂

            So give them id attributes 🙂

            It's just that this "document.formname.fieldname" syntax creeps me out. I never use it. One reason is because it's exactly equivalent to "document['formname']['fieldname']" but without the hazards caused by form and field names that aren't valid as JavaScript identifiers. Another large reason is because the name= attribute on <form> elements is deprecated, so "document.formname" (or "document['formname']") wouldn't work anyway.

            There are also spelling errors in the original code: "checkpass" is not the same name as "checkPass", and "getElementbyId" is not the same name as "getElementById" or "getElementByID". Even baseline Firefox has a JavaScript error console that catches these errors; that's without debugging tools like Firebug or Web Developer Toolbar.

              All fixed now.

              Yeah, I've just installed FireBug. I also had the name of my javascript file wrong, because I tried writing the function in another file. Changed it to the correct file now. Will have to get used to debugging in FireBug, but it's already helped me.

              Thanks all 🙂

                Write a Reply...