Advanced Search

confirm password background change

/ Published in: JavaScript
Save to your folder(s)
I just put all the functions in here
the validateConfPass function uses the key event and the two text fields to change the background color of the confPassword field when it does not equal the pass field

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <title>password confirm</title>
  4. <script type="text/javascript">
  5. 	function validateConfPass(e, confPassword, pass) {
  6. 		keychar = getCharacterPressed(e);
  7. 		if (keychar != "-1") {
  8. 			if (keychar == "backspace") {
  9. 				lenOfConf = confPassword.value.length - 1;
  10. 				if (confPassword.value.substr(0, lenOfConf) != pass.value.substr(0, lenOfConf))
  11. 					confPassword.style.background = "#FFBBBB";
  12. 				else
  13. 					confPassword.style.background = "#FFFFFF";
  14. 			}
  15. 			else {
  16. 				lenOfConf = confPassword.value.length + 1;
  17. 				if (confPassword.value + keychar != pass.value.substr(0, lenOfConf))
  18. 					confPassword.style.background = "#FFBBBB";
  19. 				else
  20. 					confPassword.style.background = "#FFFFFF";
  21. 			}
  22. 		}
  23. 	}
  24.  
  25. 	function getCharacterPressed(e) {
  26. 		code = getKeyCode(e);
  27. 		keychar = "-1";
  28. 		if (pressedPrintableChar(code))
  29. 			keychar = String.fromCharCode(code);
  30. 		if (code == 8)
  31. 			keychar = "backspace";
  32. 		return keychar;
  33. 	}
  34.  
  35. 	function getKeyCode(e) {
  36. 		code = -1;
  37. 		if (window.event)
  38. 			code = e.keyCode;
  39. 		else if (e.which)
  40. 			code = e.which;
  41. 		return code;
  42. 	}
  43.  
  44. 	function pressedPrintableChar(code) {
  45. 		if (code != 8 && code != 13 && code + "" != "undefined")
  46. 			return true;
  47. 		return false;
  48. 	}
  49. </script>
  50. </head>
  51. <body onload="javascript: document.frm.password.focus();">
  52. this code highlights the confirm password field when it is different from the password field<br />
  53. 	<form name="frm">
  54. 		password: <input type="password" name="password" id="password*" /><br />
  55. 		confirm password: <input type="password" id="confPass" onkeypress="javascript: validateConfPass(event, this, document.getElementById('password*'));" /><br />
  56. 		<input type="submit" value="Submit" />
  57. 	</form>
  58. </body>
  59. </html>

URL: http://justpushbuttons.com/examples/password_example.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.