confirm password background change - JavaScript Snipplr Social Repository

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

Choose a language for easy browsing: