Form with confirm password field

[dhossai]

Hi Folks,

Could some one tell me if this is possible and how?

I have user registration form where "password" and "confirm password" field exist. I want when user enter "confirm password" filed - if this does not match with the "password" field , it will give an error message right there before submitting the form and before going furthre any field.

Many many thanks in advance.

[karinne]

Hmmm ... Ajax is what you need for this.

I'll move your post to the Javascript section.

[Monie]

You could do the validation in scripting language as well! What scripting language are you using? ASP, PHP...?

[Blake121]

Add a code like this to your page.

Obviously you change "pass" of "[0].pass.value" to whatever your input field is called. Same for confPass.

Code: Select all

<script type="text/javascript">

document.forms[0].confPass.onblur = checkPass;

function checkPass() {
 pass = document.forms[0].pass.value;
 confPass = document.forms[0].confPass.value;

 if(pass != confPass) {
   alert("Your passwords do not match!");
 }

}
</script>

[Monie]

Which is better? Doing it (validation) the Javascript way, or the Server Side Scripting way?

[Blake121]

Well.........

Javascript saves on server requests being used, hence saving bandwidth. It's also quicker and has no page refreshes.

JS can be turned off though, or injected or stopped in many ways, so I guess it depends on the situation.

In this case he wants a instant response before the form is sent so JS is the way to go.

[Monie]

Cristal clear Blake! If the js was disabled, that is what he must put in mind...
If he is using SSS, no need to worry...

[dhossai]

Thanks guys! It works fine but only one little buz! After password do not match error box comes up and you click ok the tab or curson goes to next form input box or filed , how can you let it stay in the password reconfirm filed.
One more thing. I have a signup page whose link http://www.bangladeshilivingabroad.com/111/signup.html
if you check this link with Netscape, If you select from the drop down option I get a quick blink and it only happens in Netscape. I was testing netscape 7.2. ANY IDEA Guys!!!!!!11

[JustinStudios]

need to focus it back...

To answer your question on validation Client side or Server Side? Depends on what it is. Password matching is too important to trust JavaScript with, so you need to validate it both with Javascript and a server side language. Someone says "Why use Javascript if your going to validate it with a SSL?" Well the answer is people who have JS enabled will enjoy the benefits of a quick site, while people without will have to reload the page.

[dhossai]

Thanks Justin. I agree with you. I did actually server end also so I have both in my page. But Any idea about the problem i mentioned!

[JustinStudios]

it's just a focus method...

Here's a snippett of code. email.focus() is what your looking for

Code: Select all

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false;}
else {return true}
}
} function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false;}
}
}
</script>

Code By : www.w3schools.com

[dhossai]

Hi Justin,
I have no problem with the email issue. What i wanted is that when u input password and reconfirm that it both does not match it gives errror message, after clicking ok cursor should stay at the reconfirm password filed but it is right now goes to next field. how can you let it stay in the password reconfirm filed.
One more thing. I have a signup page whose link http://www.bangladeshilivingabroad.com/111/signup.html
if you check this link with Netscape, If you select from the drop down option I get a quick blink and it only happens in Netscape. I was testing netscape 7.2. ANY IDEA Guys!

[JustinStudios]

The above code is the answer to your question about the password field. The code was originally designed for a field named Email, but you can just as easily replace it with password. Seeing as I was linking code I figured it best to leave it as is in order to give W3Schools their proper quote.

As far as Netscape goes.. I don't have netscape installed and I won't be installing it anytime soon. So not sure what the blinking effect is.

[Blake121]

Basically you take my old code and add this extra bit in bold:

Code: Select all

<script type="text/javascript">

document.forms[0].confPass.onblur = checkPass;

function checkPass() {
 pass = document.forms[0].pass.value;
 confPass = document.forms[0].confPass.value;

 if(pass != confPass) {
   alert("Your passwords do not match!");
   document.forms[0].confPass.focus;
 }

}
</script>

This will show the error message, then focus the cursor back in the confPass field.

Remember to change "confPass" to whatever your text input is called.

[dhossai]

No! still didn't work. Here is my code I am using

PHP: Select all

<script language="JavaScript" type="text/JavaScript">
document.forms[0].password2.onblur = checkPass;
function checkPass() {
password = document.forms[0].password.value;
password2 = document.forms[0].password2.value;
if(password != password2) {
alert("Your passwords do not match!");
document.forms[0].password2.focus;
}
}
</script> 

[dhossai]

Hi Blake121,
Never mind I got it working now. I had to use

PHP: Select all

document.getElementById("password2").focus(); 

rather

PHP: Select all

document.forms[0].password2.focus; 

Now one more things comes to my mind.. how can you get that password2 filed highlighted.

[dhossai]

Never mind guys, I got that ok now. Thanks for all the help.

[Blake121]

Glad you got it sorted

You can mark this thread solved if you like.

[dhossai]

Hi,
I am back again with little problem. It is working fine with IE but not in Netscape or firefox.
Here is the code..

PHP: Select all

<script language="JavaScript" type="text/JavaScript">
document.forms[0].password2.onblur = checkPass;
function checkPass() {
 password = document.forms[0].password.value;
 password2 = document.forms[0].password2.value;
 if(password != password2) {
   alert("Your passwords do not match!");
   document.getElementById("password2").focus();
   document.getElementById("password2").select();
 }
}
</script> 

[Rakuli]

Try fixing the case mismatches and declaring you variables to avoid the confusion that some broswers may encounter

Code: Select all

<script language="javascript" type="text/javascript">
document.getElementById('password2').onblur = checkPass;

function checkPass() { 
    var password = document.getElementById('password1').value; 
    var password2 = document.getElementById('password2)value; 

    if(password != password2) {   
         alert("Your passwords do not match!");   
         password2.focus(); 
         password2.select(); 
    }
    }
</script>