Return to Snippet

Revision: 12685
at March 28, 2009 00:03 by jlvallelonga


Updated Code
<html>
<head>
<title>password confirm</title>
<script type="text/javascript">
	function validateConfPass(e, confPassword, pass) {
		keychar = getCharacterPressed(e);
		if (keychar != "-1") {
			if (keychar == "backspace") {
				lenOfConf = confPassword.value.length - 1;
				if (confPassword.value.substr(0, lenOfConf) != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
			else {
				lenOfConf = confPassword.value.length + 1;
				if (confPassword.value + keychar != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
		}
	}

	function getCharacterPressed(e) {
		code = getKeyCode(e);
		keychar = "-1";
		if (pressedPrintableChar(code))
			keychar = String.fromCharCode(code);
		if (code == 8)
			keychar = "backspace";
		return keychar;
	}

	function getKeyCode(e) {
		code = -1;
		if (window.event)
			code = e.keyCode;
		else if (e.which)
			code = e.which;
		return code;
	}

	function pressedPrintableChar(code) {
		if (code != 8 && code != 13 && code + "" != "undefined")
			return true;
		return false;
	}
</script>
</head>
<body onload="javascript: document.frm.password.focus();">
this code highlights the confirm password field when it is different from the password field<br />
	<form name="frm">
		password: <input type="password" name="password" id="password*" /><br />
		confirm password: <input type="password" id="confPass" onkeypress="javascript: validateConfPass(event, this, document.getElementById('password*'));" /><br />
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

Revision: 12684
at March 27, 2009 23:19 by jlvallelonga


Updated Code
<html>
<head>
<title>password confirm</title>
<script type="text/javascript">
	function validateConfPass(e, confPassword, pass) {
		keychar = getCharacterPressed(e);
		if (keychar != "-1") {
			if (keychar == "backspace") {
				lenOfConf = confPassword.value.length - 1;
				if (confPassword.value.substr(0, lenOfConf) != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
			else {
				lenOfConf = confPassword.value.length + 1;
				if (confPassword.value + keychar != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
		}
	}

	function getCharacterPressed(e) {
		code = getKeyCode(e);
		keychar = "-1";
		if (pressedPrintableChar(code))
			keychar = String.fromCharCode(code);
		if (code == 8)
			keychar = "backspace";
		return keychar;
	}

	function getKeyCode(e) {
		code = -1;
		if (window.event)
			code = e.keyCode;
		else if (e.which)
			code = e.which;
		return code;
	}

	function pressedPrintableChar(code) {
		if (code != 8 && code != 13 && code + "" != "undefined")
			return true;
		return false;
	}
</script>
</head>
<body onload="javascript: document.frm.password.focus();">
	<form name="frm">
		password: <input type="password" name="password" id="password*" /><br />
		confirm password: <input type="password" id="confPass" onkeypress="javascript: validateConfPass(event, this, document.getElementById('password*'));" /><br />
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

Revision: 12683
at March 26, 2009 11:52 by jlvallelonga


Updated Code
<html>
<head>
<title>password confirm</title>
<script type="text/javascript">
	function validateConfPass(e, confPassword, pass) {
		keychar = getCharacterPressed(e);
		if (keychar != "-1") {
			if (keychar == "backspace") {
				lenOfConf = confPassword.value.length - 1;
				if (confPassword.value.substr(0, lenOfConf) != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
			else {
				lenOfConf = confPassword.value.length + 1;
				if (confPassword.value + keychar != pass.value.substr(0, lenOfConf))
					confPassword.style.background = "#FFBBBB";
				else
					confPassword.style.background = "#FFFFFF";
			}
		}
	}

	function getCharacterPressed(e) {
		code = getKeyCode(e);
		keychar = "-1";
		if (isAlphaNumeric(code))
			keychar = String.fromCharCode(code);
		if (code == 8)
			keychar = "backspace";
		return keychar;
	}

	function getKeyCode(e) {
		code = -1;
		if (window.event)
			code = e.keyCode;
		else if (e.which)
			code = e.which;
		return code;
	}

	function pressedPrintableChar(code) {
		if (code != 8 && code != 13 && code + "" != "undefined")
			return true;
		return false;
	}
</script>
</head>
<body onload="javascript: document.frm.password.focus();">
	<form name="frm">
		password: <input type="password" name="password" id="password*" /><br />
		confirm password: <input type="password" id="confPass" onkeypress="javascript: validateConfPass(event, this, document.getElementById('password*'));" /><br />
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

Revision: 12682
at March 24, 2009 15:11 by jlvallelonga


Initial Code
<html>
<head>
<title>password confirm</title>
<script type="text/javascript">
function validateConfPass(e, confPassword, pass) {
	keychar = getCharacterPressed(e);
	if (keychar != "-1") {
		if (keychar == "backspace") {
			lenOfConf = confPassword.value.length - 1;
			if (confPassword.value.substr(0, lenOfConf) != pass.value.substr(0, lenOfConf)) {
				
				confPassword.style.background = "#FFBBBB";
			}
			else {
				confPassword.style.background = "#FFFFFF";
			}
		}
		else {
			lenOfConf = confPassword.value.length + 1;
			if (confPassword.value + keychar != pass.value.substr(0, lenOfConf)) {
				confPassword.style.background = "#FFBBBB";
			}
			else {
				confPassword.style.background = "#FFFFFF";
			}
		}
	}
}

function getCharacterPressed(e) {
	code = getKeyCode(e);
	keychar = "-1";
	if (pressedAlphaNumeric(code)) {
		keychar = String.fromCharCode(code);
	}
	if (code == 8)
		keychar = "backspace";
	return keychar;
}

function getKeyCode(e) {
	var code;
	var keychar;
	var charCheck;
	if(window.event) { // IE 
		code = e.keyCode;
	}
	else if(e.which) {// Netscape/Firefox/Opera
		code = e.which;
	}
	return code;
}

function pressedAlphaNumeric(code) {
	if (code != 8 && code != 13 && code + "" != "undefined") {
		return true;
	}
	return false;
}
</script>
</head>
<body onload="javascript: document.frm.password.focus();">
<form name="frm" action="password_confirm.html">
password: <input type="password" name="password" id="password*" /><br />
confirm password: <input type="password" id="confPass" onkeypress="javascript: validateConfPass(event, this, document.getElementById('password*'));" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

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

Initial Description
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

Initial Title
confirm password background change

Initial Tags
text, background, color

Initial Language
JavaScript