FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Javascript password checker





Diablosblizz
Hey, let me start off telling you what I would like from this script. I want the user to type in both passwords in the fields, then automatically I want my script to check if the passwords match. If they do, I want an image to be shown in the input box. I've attempted two gather two sources and make them work together, but so far nothing. Here is my non-working Javascript:

Code:
function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
}


And my form:

Code:
<form action="register.php?page=register" method="post" name="Form1">
<table width="100%" cellspacing="2" cellpadding="0">
  <tr>
    <td colspan="3" style="height:20px; font-weight:bold;">Account Options</td>
   <td rowspan="6" style="vertical-align:top; padding:6px;">The following fields are required.</td>

  </tr>
  <tr>
    <td>Username:</td>
    <td><input type="text" size="45" name="username"/></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" size="45" name="password" id="password" script="javascript: checkpasswords(this);" /></td>
  </tr>
  <tr>
    <td>Password Again:</td>
    <td><input type="password" size="45" name="password2" id="password2"></td>
  </tr>
    <tr>
    <td>Email:</td>
    <td><input type="text" size="45" name="email"/></td>
  </tr>
  </table><br />
  <center><input type="submit" value="Register"></center></td>
  </form>


I thought of putting the onsubmit value on the form, but I don't want it to check the form when it's being submitted but to check it while users are typing. Please help a newbie with Javascript out!

Thanks, and kind regards.
Star Wars Fanatic
Try onkeyup:

Code:
  <tr>
    <td>Password:</td>
    <td><input type="password" size="45" name="password" id="password" onkeyup="javascript: checkpasswords(this);" /></td>
  </tr>
 <tr>
    <td>Password Again:</td>
    <td><input type="password" size="45" name="password2" id="password2" onkeyup="javascript: checkpasswords(this);></td>
  </tr>


When the user lets go of a key (which is what happens when you click the key) it will throw that event. You don't want to use something like onchange, as it only registers as a change after you have deselected the box.
Using onkeyup will run the script each time a key is pressed.
Let me know if it works, it should, however it isn't tested.
Diablosblizz
I'm sorry to say, but this didn't do anything. Sad I am starting to wonder if the image paths are right, but I have no way of checking.
Stubru Freak
To debug, you can put
Code:
alert('test');
in the function. This way you know if the function gets called or not. If it does, you can put
Code:
alert(theForm.password.value);
in the function. That way you know if it can retrieve the password. Keep doing that until you find out exactly which step fails, and if you can't find why, tell us, so we will be able to see what's wrong probably.
Diablosblizz
I have tried the alert('test'); and no go. I don't actually think that the script is being called properly. Here is what I did:

Code:
function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
alert('test');
}


I, personally, think that is has to do with the onkeyup call like the javascript doesn't know what to do. I am probably horribly wrong, but I tried.
Stubru Freak
Diablosblizz wrote:
I have tried the alert('test'); and no go. I don't actually think that the script is being called properly. Here is what I did:

Code:
function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
alert('test');
}


I, personally, think that is has to do with the onkeyup call like the javascript doesn't know what to do. I am probably horribly wrong, but I tried.


Two things:

Try putting the alert('test'); at the beginning of your function, to make sure there isn't an error that stops the function.

Give us the code of the form. Or is it exactly as Star Wars Fanatic posted?
Star Wars Fanatic
K, I've found the problem.
You had your ids all set wrong, in fact, your form didn't even have one.

This is tested and works, however, you may want to change where you display the image, as it looks quite silly right now:

Javascript:
Code:
function checkpasswords()   {
   theForm = document . getElementById ( 'Form1' ) ;
   doc = theForm . password ;
   if (theForm . password.value != theForm . password2 . value)   {
      doc . style . background = "url('images/checkx.gif')" ;
   }
   else   {
      doc . style . background = "url('images/checka.gif')" ;
   }
}


And Form:
Code:
<form action="register.php?page=register" method="post" name="Form1" id="Form1">
<table width="100%" cellspacing="2" cellpadding="0">
  <tr>
    <td colspan="3" style="height:20px; font-weight:bold;">Account Options</td>
   <td rowspan="6" style="vertical-align:top; padding:6px;">The following fields are required.</td>

  </tr>
  <tr>
    <td>Username:</td>
    <td><input type="text" size="45" name="username"/></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" size="45" name="password" id="password" onkeyup="javascript: checkpasswords();" /></td>
  </tr>
  <tr>
    <td>Password Again:</td>
    <td><input type="password" size="45" name="password2" id="password2" onkeyup="javascript: checkpasswords();" /></td>
  </tr>
    <tr>
    <td>Email:</td>
    <td><input type="text" size="45" name="email"/></td>
  </tr>
  </table><br />
  <center><input type="submit" value="Register"></center></td>
  </form>


The form you can change, but you have to have keep the ids of the form itself, and the two password fields.

Let us know if you need to change some things and it breaks it somehow.
Diablosblizz
Woot, you are my life saver! One question though, is there anyway I can wait until both fields are filled before it checks? I figure that using an if would do it well, but I can't seem to implement it. I figure that if the field is filled that the script would do nothing until the second field is filled.

Also, after some image editing the images it doesn't look silly anymore. Or, that's at least my perspective.

Thank you again!
Stubru Freak
Change the code to this:

Code:
function checkpasswords()   {
   theForm = document . getElementById ( 'Form1' ) ;
   doc = theForm . password ;
   if (theForm.password2.value != '' && theForm.password.value != ''){
      if (theForm . password.value != theForm . password2 . value)   {
         doc . style . background = "url('images/checkx.gif')" ;
      }
      else   {
         doc . style . background = "url('images/checka.gif')" ;
      }
   }
}
Star Wars Fanatic
Diablosblizz wrote:
Also, after some image editing the images it doesn't look silly anymore. Or, that's at least my perspective.

Sorry, didn't mean to be so forceful, it was just my opinion. And you are welcome, I'm glad to help.

Stubru Freak wrote:
Change the code to this:

Code:
function checkpasswords()   {
   theForm = document . getElementById ( 'Form1' ) ;
   doc = theForm . password ;
   if (theForm.password2.value != '' && theForm.password.value != ''){
      if (theForm . password.value != theForm . password2 . value)   {
         doc . style . background = "url('images/checkx.gif')" ;
      }
      else   {
         doc . style . background = "url('images/checka.gif')" ;
      }
   }
}


That would be it, the thing you would be adding is the iif (theForm.password2.value != '' && theForm.password.value != '') which checks if both password fields have something in them before checking if they match.
Diablosblizz
Okay, thanks guys! Last question, is it possible for Javascript to visit a page, get the text from the page (will just be yes or no) and then do an if to show an image. I'm trying to make the form check if the username is already in use, and do the same usage of the passwords.

Thanks, and kind regards.
Star Wars Fanatic
Yes and no.

Lol, that may not be what you're looking for, but it is true.
You would use JavaScript in conjunction with PHP using something called AJAX.

If you would like to do that, it will take a bit of experience in both JavaScript and PHP.
Here is a basic tutorial that will get you up and running with exactly the sort of thing you want.

What you will need is a PHP script to interface with where ever the usernames are being stored to check if they are the same.

And from what you are saying, are you storing the usernames and passwords in text files?
Diablosblizz
AJAX is a bit too complex for me at this time. Heh, I am still learning Javascript let alone learn a whole different language. I've googled a bit and haven't came up with anything so I guess it's impossible without AJAX. Perhaps I will learn it at a later data, but for now I am unable.

Still, thank you very much.
jmlworld
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.

I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?
Stubru Freak
Diablosblizz wrote:
AJAX is a bit too complex for me at this time. Heh, I am still learning Javascript let alone learn a whole different language. I've googled a bit and haven't came up with anything so I guess it's impossible without AJAX. Perhaps I will learn it at a later data, but for now I am unable.

Still, thank you very much.


AJAX isn't another language. You just use something called an XMLHttpRequest in Javascript to do exactly what you want: get a page from the internet.
Most people who have trouble with AJAX don't know exactly what they want, they just want to use AJAX, and then they get in trouble.
Star Wars Fanatic
jmlworld wrote:
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.

I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?


I tested it in Firefox, and it works, lol.
jmlworld
Star Wars Fanatic wrote:
jmlworld wrote:
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.

I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?


I tested it in Firefox, and it works, lol.


May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this.
Star Wars Fanatic
jmlworld wrote:
Star Wars Fanatic wrote:
jmlworld wrote:
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.

I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?


I tested it in Firefox, and it works, lol.


May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this.


Did you test it? Because I am using the latest stable version of Firefox 2...
Check out the working version here:
http://www.swf.frih.net/PHP%20Testing%20Site/test.html
Working in Firefox...
jmlworld
Star Wars Fanatic wrote:
jmlworld wrote:
Star Wars Fanatic wrote:
jmlworld wrote:
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.

I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?


I tested it in Firefox, and it works, lol.


May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this.


Did you test it? Because I am using the latest stable version of Firefox 2...
Check out the working version here:
http://www.swf.frih.net/PHP%20Testing%20Site/test.html
Working in Firefox...


Very Happy It's working, may be it was something wrong with my code or Test server configuration..

Thank you SWF.
SamiTheBerber
Stubru Freak wrote:
Change the code to this:

Code:
function checkpasswords()   {
   theForm = document . getElementById ( 'Form1' ) ;
   doc = theForm . password ;
   if (theForm.password2.value != '' && theForm.password.value != ''){
      if (theForm . password.value != theForm . password2 . value)   {
         doc . style . background = "url('images/checkx.gif')" ;
      }
      else   {
         doc . style . background = "url('images/checka.gif')" ;
      }
   }
}

In jQuery this would be for example:
Code:
var password = $('#password');
var password2 = $('#password2');

password.add(password2).change(function() {
    if ( password.val() == password2.val() ) {
        password.css('background', 'url("images/checka.gif")');
    } else {
        password.css('background', 'url("images/checkx.gif")');
    }
});


I prefer to read about jQuery, it is lots of smarter way to write javascript. http://jquery.com
Diablosblizz
Hmm, I thought AJAX was another language. Maybe I'll look into it after I don't have so much to do with schools and stuff. Culminating project and exams don't mix too well. Wink

The onkeyup worked perfectly for FF2+ and IE7. Though, I didn't really like the onkeyup too too much so I changed it to check after the field has been fully changed.

Thank you a lot for your help!
Stubru Freak
SamiTheBerber wrote:
Stubru Freak wrote:
Change the code to this:

Code:
function checkpasswords()   {
   theForm = document . getElementById ( 'Form1' ) ;
   doc = theForm . password ;
   if (theForm.password2.value != '' && theForm.password.value != ''){
      if (theForm . password.value != theForm . password2 . value)   {
         doc . style . background = "url('images/checkx.gif')" ;
      }
      else   {
         doc . style . background = "url('images/checka.gif')" ;
      }
   }
}

In jQuery this would be for example:
Code:
var password = $('#password');
var password2 = $('#password2');

password.add(password2).change(function() {
    if ( password.val() == password2.val() ) {
        password.css('background', 'url("images/checka.gif")');
    } else {
        password.css('background', 'url("images/checkx.gif")');
    }
});


I prefer to read about jQuery, it is lots of smarter way to write javascript. http://jquery.com


For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first?
SamiTheBerber
Stubru Freak wrote:
For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first?

No matter how simple the task is. I personnally find jQuery to be much simpler to read.

Yes, the code is a bit different, just replace
Code:
if ( password.val() == password2.val() )
with this
Code:
if ( password.val() == password2.val() && password.val() && password2.val())

change() should be keyUp(). if I remember the function correctly.
Stubru Freak
SamiTheBerber wrote:
Stubru Freak wrote:
For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first?

No matter how simple the task is. I personnally find jQuery to be much simpler to read.

Yes, the code is a bit different, just replace
Code:
if ( password.val() == password2.val() )
with this
Code:
if ( password.val() == password2.val() && password.val() && password2.val())

change() should be keyUp(). if I remember the function correctly.


No it isn't, that would say the passwords don't match, even though no password is filled in. You want to have it show nothing until both passwords are filled in. That's an extra if structure, so your jQuery gets almost just as big as a normal Javascript code, only harder to read for most people.
Also, it requires a whole library of extra code, so more bandwidth, and the possibility of bugs or browser incompatibilities being in jQuery instead of your code.
So for tasks like this, you should really go for just Javascript. Of course when he wants to use AJAX, jQuery can become useful.
rehana
thanx a lot friend i need that kind of code
im new java buti will teach very soon
Related topics
password protecting a directory
Spanish Javascript Tutorial
Looking for easy FormMail Script
javascript function not being seen
Password problem
Password Protecting a webpage
Php parsing error! Need help
Javascript - can I read a $_SESSION variable passed in URL?
javascript/ajax only to have login/user editor
Is this javascript valid?
Javascript or Online spell checker
Javascript and Dynamic Select Boxes
[HOW TO...] Password Strength Meter
Looking for a javascript input validator (name your price)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.