• 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

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
FacebooktwitterredditpinterestlinkedintumblrmailFacebooktwitterredditpinterestlinkedintumblrmail
Posted in: Education, Simple Tagged: code, html5, JavaScript, simple level
← Temperature Converter [SIMPLE]
Celebrate the Creation of the US Constitution →

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

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
April 2021
M T W T F S S
 1234
567891011
12131415161718
19202122232425
2627282930  
« 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

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

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