Registration Form [SIMPLE]

Simple skill of form validation.

	<form id="signup" action="javascript:void(create())">
		<table>
		<th colspan="2">Account Sign-up</th>
		<tr>
			<td class="label">Real Name : </td>
			<td class="field"><input type="text" id="fname" placeholder="Name" pattern="^\w+\D+$" title="Only Letters and Space" required /></td>
			<td class="message"><strong id="message1"></strong></td>
		</tr>
		<tr>
			<td class="label">Email Address : </td>
			<td class="field"><input type="email" id="email" placeholder="Email" required /></td>
			<td class="message"><strong id="message2"></strong></td>
		</tr>
		<tr>
			<td class="label">Username : </td>
			<td class="field"><input type="text" id="username" placeholder="Login" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Letters & Numbers, 20 char max" required /></td>
			<td class="message"><strong id="message3"></strong></td>
		</tr>
		<tr>
			<td class="label">Password : </td>
			<td class="field"><input type="password" id="password" placeholder="Password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Letters, Numbers, Special characters, 8 char min" required /></td>
			<td class="message"><strong id="message4"></strong></td>
		</tr>
		<tr>
			<td class="label">Re-Enter Password : </td>
			<td class="field"><input type="password" id="password2" placeholder="Re-Enter Password" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Re-Enter exactly" required /></td>
			<td class="message"><strong id="message5"></strong></td>
		</tr>
		<tr>
			<td colspan="2" class="button"><input type="submit" id="create" value="Create Account" /></td>
		</tr>
		</table>
	</form>
	<script>
		var fname = document.getElementById("fname");
		var message1 = document.getElementById("message1");
			fname.onfocus = function(){
				message1.innerHTML = "Full Name<br/>(ie. John Doe)";
			}
			fname.onblur = function(){
				console.log("Name = " + fname.value);
				message1.innerHTML = "";
			}
		var email = document.getElementById("email");
		var message2 = document.getElementById("message2");
			email.onfocus = function(){
				message2.innerHTML = "Email Address<br/>(ie. JDoe@domain.tld)";
			}
			email.onblur = function(){
				console.log("Email = " + email.value);
				message2.innerHTML = "";
			}
		var username = document.getElementById("username");
		var message3 = document.getElementById("message3");
			username.onfocus = function(){
				message3.innerHTML = "Username<br/>(Alphanumeric 20 max)";
			}
			username.onblur = function(){
				console.log("Username = " + username.value);
				message3.innerHTML = "";
			}
		var password = document.getElementById("password");
		var message4 = document.getElementById("message4");
			password.onfocus = function(){
				message4.innerHTML = "Password<br/>(Letters/Numbers/Special 8 min)";
			}
			password.onblur = function(){
				message4.innerHTML = "";
			}
		var password2 = document.getElementById("password2");
		var message5 = document.getElementById("message5");
		var button = document.getElementById("create");
			password2.onfocus = function(){
				message5.innerHTML = "Re-Enter<br/>(Must be Identical)";
			}
			password2.onkeyup = function(){
				console.log("Password = " + password.value + "\nReEnter = " + password2.value);
				message5.innerHTML = (password.value === password2.value) ? "Matches" : "Mismatch";
			}
			password2.onblur = function(){
				message5.innerHTML = "";
			}
		function create(){
			var buffer = "<strong>User Account Created</strong><hr/>";
			buffer += "Full Name (" + fname.value + ")<br/>";
			buffer += "Email Address (" + email.value + ")<br/>";
			buffer += "Username (" + username.value + ")<br/>";
			buffer += "Password (" + password.value + ")<br/>";
			buffer += "Confirmed (" + ((password.value === password2.value) ? "True" : "False") + ")";
			document.write(buffer);
		}
	</script>

DEMO | DOWNLOAD