Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Registration Form</title>
	<style>
		/*	Css for the form  (Optional)	*/
		#registerForm
		{
			margin-top: 13%;
			margin-left: 30%;
			width: 40%;
		}
		input
		{
			width: 70%;
			margin-bottom: 2%;
		}
		button
		{
			margin-right: 5%;
		}
		span
		{
			color:red;
		}
		#submitMsg
		{
			color:green;
		}

	</style>
</head>
<body>

		<fieldset id="registerForm">
			<legend>Register Now</legend>
			<input type="text" id="name" placeholder="Enter Name"><span id="nameError"></span><br>
			<input type="text" id="email" placeholder="Enter Email Id"><span id="emailError"></span><br>
			<input type="password" id="pw1" placeholder="Enter Password"><span id="pw1Error"></span><br>
			<input type="password" id="pw2" placeholder="Repeat Password"><span id="pw2Error"></span><br>
			<button id="register" onclick="reg()">Register</button><button id="reset" onclick="res()">Reset</button><span id="submitMsg"></span>
		</fieldset>

	<script>
		/*		When the register button will be clicked		*/
		function reg() {
			/*		Grabbing all the elements from html 	*/
			var name = document.getElementById('name');
			var email = document.getElementById('email');
			var pw1  = document.getElementById('pw1');
			var pw2 = document.getElementById('pw2');
			var nameError = document.getElementById('nameError');
			var emailError = document.getElementById('emailError');
			var pw1Error = document.getElementById('pw1Error');
			var pw2Error = document.getElementById('pw2Error');
			var submitMsg = document.getElementById('submitMsg');

			/*	Name check 	*/
			var namePattern = /^[a-zA-Z\s]+$/;
			var f=1;
			if(name.value.match(namePattern))
			{
				nameError.innerHTML = "";

			}
			else
			{
				nameError.innerHTML = "Not a valid name";
				f=0;
			}
			/*	Email pattern check */
			var emailPattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			if(email.value.match(emailPattern))
			{
				emailError.innerHTML = "";

			}
			else
			{
				emailError.innerHTML = "Not a valid email";
				f=0;
			}
			/*	Password - 1 check if empty */
			if(pw1.value=="")
			{
				pw1Error.innerHTML = "Enter password";
				f=0;
			}
			else
			{
				pw1Error.innerHTML = "";
				/* 	Password2 check */
				if(pw1.value!=pw2.value)
				{
					f=0;
					pw2Error.innerHTML = "Password not matched";
				}
				else
				{
					pw2Error.innerHTML = "";
				}
			}
			if(f==1)
			{
				res();
				submitMsg.innerHTML="Form submitted Successfully";

			}
			else
				submitMsg.innerHTML="";
		}

		/*		When the reset button will be clicked		*/
		function res() {
			var name = document.getElementById('name');
			var email = document.getElementById('email');
			var pw1  = document.getElementById('pw1');
			var pw2 = document.getElementById('pw2');
			var nameError = document.getElementById('nameError');
			var emailError = document.getElementById('emailError');
			var pw1Error = document.getElementById('pw1Error');
			var pw2Error = document.getElementById('pw2Error');
			var submitMsg = document.getElementById('submitMsg');
			name.value = "";
			email.value = "";
			pw1.value = "";
			pw2.value = "";
			nameError.innerHTML = "";
			pw1Error.innerHTML = "";
			pw2Error.innerHTML = "";
			emailError.innerHTML = "";
			submitMsg.innerHTML = "";
		}


	</script>
</body>
</html>