Untitled

<!doctype html>
<html>
	<head>
		<title>User Registration Page</title>
		<h1>FaceTwitter Registration</h1>
		<h3>Please enter Username, Password, and email details</h3>
		<h6>Username must contain only alphanumeric characters, no special characters such as "!" or "@"</h6>
		<h6>Password must contain one uppercase letter, one number, and one special character</h6>
		<script>
			var REQUIRED_PASSWORD_CHARACTERS = "!@#$%^~&+=";
			function validateUserName() {
				var value = document.getElementById("userName").value;
				var message = document.getElementById("userNameMessage");

				if (value == "") {
					message.innerText = "Username must be one or more alphanumeric characters."
				} else {
					message.innerText = "";
				}

				for (var counter = 0; counter < value.length; counter++) {
					var character = value.charAt(counter);

					if ((character >= "a" && character <= "z")
						|| (character >= "A" && character <= "Z")
						|| (character >= "0" && character <= "9")) {

					} else {
						message.innerText = "Character '" + character + "' is invalid in the username. Please enter a valid character";
					}
				}
			}

			function validatePassword() {
				var value = document.getElementById("password").value;
				var message = document.getElementById("passwordMessage");
				var hasUpper = false;
				var hasDigit = false;
				var hasRequired = false;

				if (value == "") {
					message.innerText = "Password must be at least 8 characters, with at least one upper-case, and one character from ' "+ REQUIRED_PASSWORD_CHARACTERS + "'.";
				} else {
					message.innerText = "";
				}

				if (value.length < 8) {
					message.innerText = "Password must be at least 8 characters.";
					return;
				}
				for (var counter = 0; counter < value.length; counter++) {
					var character = value.charAt(counter);

					if (character >= "A" && character <= "Z") {
						hasUpper = true;
					} else if (character >= "0" && character <= "9") {
					  hasDigit = true;
					} else if (REQUIRED_PASSWORD_CHARACTERS.indexOf(character) >= 0) {
					  hasRequired = true;
					}
				}

				if (!hasUpper) {
					message.innerText = "Password must have at least one uppercase letter.";
				} else if(!hasDigit) {
					message.innerText = "Password must have at least one number.";
				} else if(!hasRequired) {
					message.innerText = "Password must have at least one character from ' "+ REQUIRED_PASSWORD_CHARACTERS + "'.";
				}
			}

			function validateEmailAddress() {
				var value = document.getElementById("emailAddress").value;
				var message = document.getElementById("emailAddressMessage");

				if (value == "") {
					message.innerText = "Please enter an email address for proper registration.";
				} else {
					message.innerText = "";
				}
			}
		</script>
	</head>
	<body>
		Please enter desired username:
		<input type="text" id="userName" oninput="validateUserName();">
		<span id="userNameMessage" style="color: red;"></span>
		<br>
		Please enter desired password:
		<input type="password" id="password" oninput="validatePassword();">
		<span id="passwordMessage" style="color: red;"></span>
		<br>
		Please enter desired email address:
		<input type="text" id="emailAddress" oninput="validateEmailAddress();">
		<span id="emailAddressMessage" style="color: red;"></span>
		<br>
	</body>
</html>