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