• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

html5

Registration Form [SIMPLE]

September 15, 2015 by GµårÐïåñ

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
Posted in: Education, Simple Tagged: code, html5, JavaScript, simple level

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
March 2021
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
293031  
« Apr    

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

CodeProject

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

1951 memorial 1977 1941 1952 1995 1846 1965 vocabulary 1918 1898 1962 1958 1981 1915 1983 1971 1994 1943 1980 1968 has_audio code 1974 1935 1917 1776 1984 1959 1902 1944 New York 1998 1939 1949 1937 NASA 1967 1946 1934 1993 1969 1970 1991 Soviet Union 1975 1973 2000 daily pic 1938 1859 1956 1955 1865 has_video United States 1985 1789 1908 1989 1919 1963 1957 holiday England 1851 history 1940 1979 Germany 1990 1922 1953 1942 1960 1986 1964 1948 1916 1978 1982 event 1976 1914 1911 1901 1933 1950 1863 1947 1966 1870 1889 national park 1954 annual 1972 1945 1961 1812

Archives

Access Options

  • Register
  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2021 Major Mike | Privacy Policy | DMCA | Contact | About
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal