sean14592 Posted May 21, 2008 Share Posted May 21, 2008 HI, I want to make sure that two password fields are checked that the value of both of them are the same, I have managed to do this but if you go back to edit password field 1 to something diffeent than before (so its not the same as pass field 2) they both still have no errors to display to user. So I need to somehow make it keep checking everytime the pass field 1 is changed to update pass field 2. my current JS: function checkPassword(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; var psstxt = whatYouTyped.value; if (txt.length > 3 ) { fieldset.className = "welldone"; } else { fieldset.className = ""; } } function checkPassword2(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; if (document.o_register.password.value == document.o_register.password2.value ) { fieldset.className = "welldone"; } else { fieldset.className = ""; } } Cheers Sean Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 22, 2008 Share Posted May 22, 2008 Well, I guess I would ask "when" do you want to validate the passwords. I typically only validate onsubmit of the page. In that case your two functions above are not too relevant. You can validate onchange of the fields. That can be annoying in most cases though. In any case, the solution would be (in my opinioni) would be a single functino that you cann either onchange of one of the two fields or onsubmit of the form. Also, several lines in thiose functions have no use. For example you have some lines that create a variable that is never used. Try this single function: function checkPasswords() { var pass1= document.o_register.password; var pass2= document.o_register.password2; if (pass1.value.length > 3 ) { pass1.className = "welldone"; } else { pass1.className = ""; pass2.className = ""; return false; } if (pass1.value == pass2.value) { pass2.className = "welldone"; } else { pass2.className = ""; return false; } return true; } Quote Link to comment Share on other sites More sharing options...
sean14592 Posted May 22, 2008 Author Share Posted May 22, 2008 Hi, Ummm, I have used the code above, though now it won't even check the length of the first password field. ????, lol, thanks anyway. Sean Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 22, 2008 Share Posted May 22, 2008 It works for me. I don't have full access to your code so some assumptions will be made. Part of your responsibility is to ensure that you provide complete, accurate details of the problem and what you are trying to accomplish - including any pertinent information. Here is a working test page using the same function I posted above. <html> <head> <style> .welldone { background-color: green; </style> <script type="text/javascript"> function checkPasswords() { var pass1= document.o_register.password; var pass2= document.o_register.password2; if (pass1.value.length > 3 ) { pass1.className = "welldone"; } else { pass1.className = ""; pass2.className = ""; return false; } if (pass1.value == pass2.value) { pass2.className = "welldone"; } else { pass2.className = ""; return false; } return true; } </script> </head> <body> <form name="o_register"> Password 1: <input type="password" onchange="checkPasswords();" name="password" /><br> Password 2: <input type="password" onchange="checkPasswords();" name="password2" /><br> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
sean14592 Posted May 22, 2008 Author Share Posted May 22, 2008 umm, I dont understand wha i doig wrong then cause here's my full code... http://pastebin.com/m233c2bfe Cheers Sean Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 22, 2008 Share Posted May 22, 2008 OK, now that I see your whole page in context I see what you are talking about. But, I don't think there is any technical solution. The problem lies in the implementation process. I reverted to your original functions and there are two specific problems (one which should have a solution, the other doesn't): For the 2nd password. Assuming the user has changed the 1st password (after the 1st and 2nd had already matched), you could call your original function onfocus of the 2nd field. Then if the values don't still match the class could be changed to indicate that. However, putting an onfocus event on that field is not workign correctly. you have too much code for me to go through it all for debugging. The more troubling issue is the 1st password. Let's say a user changes the first password after the 1st and 2nd had already been matched. Based on the "hint" the green background is supposed to indicate that the password passes the length validation. So, if you hcange the hint color when editing the 1st password, what is the user supposed to infer when the color changes? The hint says nothing about matching the 2nd password. The problem is further exacerbated by the fact that all the hints are hidden except for the field in focus. If the 2nd password field hint was visible when editing the 1st password, you could modify that hint in the user's view so the change would make sense. In my opinioin you are trying to add unnecessary, overcomplicated functionality. However, I do see a quick fix (although i still don't like the entire approach). 1. Revert to your original functions. 2. Create this new function function blankPassword2() { document.o_register.password2.value = ''; document.o_register.password2.parentNode.className = ""; } 3. In the password 1 field add this trigger onchange="blankPassword2();" . Now whenever the user edits the password 1 field, they will be forced to revalidate password 2. That's the only solution I see in the current framework you have. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.