Solved

500 points --- Compare password & retype password field validation???

Posted on 2004-10-09
21
845 Views
Last Modified: 2008-02-01
Hi,

I have a password and retype password field. I want the form to submit only when they both are same. I am already calling field level validtions on Form OnSubmit.

So please provide me the way to validate both pwd fields and from where to call the function. I think that the submit button would be a good place from where on clicking the functions is called to check both pwd fields and if not same, an alert window will appear and the form is not submitted.

Need it fast... so 500 points for this question.

Thanks,
Khurram.
0
Comment
Question by:khurram007
  • 7
  • 7
  • 4
  • +1
21 Comments
 
LVL 2

Expert Comment

by:mag1c1an
ID: 12266767
Hi,
Since i dont really know the contents of your html page, I am just writing the function below, it is pretty easy to understand, give me a shout if you dont understand anything or run into problems:

<SCRIPT LANGUAGE="JavaScript">
function CheckPassword()
{
 var Password, ConfPassword, Result;
 Password = document.frmRegistration.txtPassword.value;
 ConfPassword = document.frmRegistration.txtConfirmPass.value;
 Result = document.frmRegistration.txtResult;
 if(Password == ConfPassword)
   Result.value = "Congratulations - Account Created";
 else
   Result.value = "Your Passwords Do Not Match";
}
</SCRIPT>

-Mag
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12266781
function checkPassword(form) {
  if(form.password.value == form.retypePassword.value) {
    return true;
  } else {
    alert("Your need to type the same password in both boxes.");
    return false;
  }
}

call it in the submit button on onSubmit. To use with your other validation functions use:

onSubmit="validate() && checkPassword(this.form)"

where validate() is your field validation function.

Alternately you could just add the checkPassword code to your validation function.
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 12266809
A few notes:
The above assumes that your form name is
"frmRegistration"
and that the first password field is
"txtPassword"
and the confirmation password field is
"txtConfirmPass"

This part you will need to change if you want an alert:
if(Password == ConfPassword)
   Result.value = "Congratulations - Account Created";
 else
   Result.value = "Your Passwords Do Not Match";



change to:
if(Password != ConfPassword)
   alert ("Congratulations - Account Created");


(Not tested, but should work)

Mag
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:khurram007
ID: 12266883
Well honestly I am not good in Javascript... so want to have something ready to cut and paste. lol

here is my html.

<table>
    <tr>
         <td>
                 <font face="Verdana" size="2">Password*</font></td>
         <td>
                <input type="password" class="frmText" name="pwd" /></td>
    </tr>
 <tr>
         <td>
               <font face="Verdana" size="2">Retype Password*</font></td>
         <td>
               <input type="password" class="frmText" name="pwd2"  /></td>
    </tr>
 <tr>
         <td>
              <input type="submit" class="frmButton" name="Submit" value="Register"/></td>
    </tr>
<table>
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12266939
Change your submit button code to as follows:
<input type="submit" class="frmButton" name="Submit" value="Register" onSubmit="return this.form.pwd.value == this.forn.pwd2.value"/></td>

You may have some trouble with your tables. Consider rewriting using <fieldset>s and <label>s
0
 
LVL 2

Author Comment

by:khurram007
ID: 12266984
Form name is frmRegister. I have tried this and its not working... What am I doing wrong???

<SCRIPT LANGUAGE="JavaScript">
function CheckPassword()
{
 var Password, ConfPassword, Result;
 Password = document.frmRegister.pwd.value;
 ConfPassword = document.frmRegister.pwd2.value;
 Result = document.frmRegister.txtResult;
 if(Password != ConfPassword)
   alert ("Passwords don't match - Try again!");
}
</SCRIPT>

   <input type="submit" class="frmButton" name="Submit" value="Register" onclick="CheckPassword()"/>
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12267040
get rid of the Result = ...; line.
0
 
LVL 2

Author Comment

by:khurram007
ID: 12267062
Ok,

Its work like a charm. But the form is still submitting. I want to stop submitting in case of alert. I have already added

return false;

but no difference.
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12267079
Just use this function instead, it's slightly simpler:

 function checkPassword(form) {
  if(form.pwd.value == form.pwd2.value) {
    return true;
  } else {
    alert("Your need to type the same password in both boxes.");
    return false;
  }
}

<input type="submit" class="frmButton" name="Submit" value="Register" onSubmit="return checkPassword(this.form)"/>
0
 

Expert Comment

by:joke5ter
ID: 12267124
oops, I am not getting a email when theres a reply here :-( will check into it and get back to you in a few mins..
0
 

Expert Comment

by:joke5ter
ID: 12267280
Ok, solved:


<SCRIPT LANGUAGE="JavaScript">
function CheckPassword()
{
 var Password, ConfPassword, Result;
 Password = document.frmRegister.pwd.value;
 ConfPassword = document.frmRegister.pwd2.value;
 Result = document.frmRegister.txtResult;
if(Password == ConfPassword)
return true;
else
alert ("Passwords don't match - Try again!");
return false;
}
</SCRIPT>



<form name="frmRegister">
<table>
  <tr>
     <td>
         <font face="Verdana" size="2">Password*</font></td>
     <td>
        <input type="password" class="frmText" name="pwd" /></ td>
  </tr>
 <tr>
     <td>
        <font face="Verdana" size="2">Retype Password*</font></ td>
     <td>
        <input type="password" class="frmText" name="pwd2"  /></ td>
  </tr>
 <tr>
     <td>
  <input type="submit" class="frmButton" name="Submit" value="Register" onclick="return  CheckPassword()"/>

</td>
  </tr>
<table>
</form>
0
 

Expert Comment

by:joke5ter
ID: 12267294
Oops, this is my old account that I used, please award the points to my new account of mag1c1an

Thanks,
Mag
0
 
LVL 2

Accepted Solution

by:
mag1c1an earned 500 total points
ID: 12267312
So heres the solution again:

<SCRIPT LANGUAGE="JavaScript">
function CheckPassword()
{
 var Password, ConfPassword, Result;
 Password = document.frmRegister.pwd.value;
 ConfPassword = document.frmRegister.pwd2.value;
 Result = document.frmRegister.txtResult;
if(Password == ConfPassword)
return true;
else
alert ("Passwords don't match - Try again!");
return false;
}
</SCRIPT>



<form name="frmRegister">
<table>
  <tr>
     <td>
         <font face="Verdana" size="2">Password*</font></td>
     <td>
        <input type="password" class="frmText" name="pwd" /></ td>
  </tr>
 <tr>
     <td>
        <font face="Verdana" size="2">Retype Password*</font></ td>
     <td>
        <input type="password" class="frmText" name="pwd2"  /></ td>
  </tr>
 <tr>
     <td>
  <input type="submit" class="frmButton" name="Submit" value="Register" onclick="return

CheckPassword()"/>

</td>
  </tr>
<table>
</form>
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12267364
Again that won't work because there's no 'result' textbox anywhere. It'll throw an error.
And you should ask somewhere to have one account deleted, you're not allowed two accounts.
0
 
LVL 2

Author Comment

by:khurram007
ID: 12267405
Perfect!!!

Its working perfectly... I have a little question more... I hope you will not mind it...

I have same retype validation needed on the email fields also on the same form. I have modify the function for it. But can u tell me how to call 2 functions on a single on_click event of submit button?

I have tried this, but its not working.... Please answer here... If u want I will start another question and issue u points there.

Thanks,
Khurram.
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12267436
onSubmit = "return checkPassword(this.form) && checkEmail(this.form)"

...said in my original response.
0
 
LVL 2

Author Comment

by:khurram007
ID: 12267447

<input type="submit" class="frmButton" name="Submit" value="Register" onclick="return checkPassword(this.form) && checkEmail(this.form)" />

Not working!!!
0
 
LVL 2

Author Comment

by:khurram007
ID: 12267462
I don't think its good to ask another question here... So I have issued 500 points for the next one... Hope to see u all there too...

Here is the new question...

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21162192.html

Khurram.
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 12267533
Sorry, I was assuming you were using my functions.
0
 
LVL 2

Author Comment

by:khurram007
ID: 12267651
No problem...

Cheers...

Khurram.
0
 
LVL 2

Expert Comment

by:mag1c1an
ID: 12267663
Yeah sorry, I lost the pass to one of my accounts and my mailbox was dead so i couldnt use the reminder...anyway, long story short, a new mail box and a new id and here i am...now i got my old mailbox back..i logged in to check things out.
I dont want to delete the old account coz i have a couple of answers there in the history...deleteing that will lose that.

Cheers,
Mag
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question