Assignment 1 of JS

Design a form which looks like below and add validation for all elements to check all fields compulsorily filled by the user on ONSUBMIT and ON LOST FOCUS event of each element.
 avatar
Rohit143
html
2 years ago
2.7 kB
40
Indexable
Never
<html>
	<head>
		<script>
			function myMethod() {

				var name =
					document.forms["RegForm"]["Name"];
				var email =
					document.forms["RegForm"]["EMail"];
				var phone =
					document.forms["RegForm"]["Telephone"];
				var what =
					document.forms["RegForm"]["Subject"];
				var password =
					document.forms["RegForm"]["Password"];
				var address =
					document.forms["RegForm"]["Address"];

				if (name.value == "") {
					window.alert("Please enter your name.");
					name.focus();
					return false;
				}

				if (address.value == "") {
					window.alert("Please enter your address.");
					address.focus();
					return false;
				}

				if (email.value == "") {
					window.alert(
					"Please enter a valid e-mail address.");
					email.focus();
					return false;
				}

				if (phone.value == "") {
					window.alert(
					"Please enter your telephone number.");
					phone.focus();
					return false;
				}

				if (password.value == "") {
					window.alert("Please enter your password");
					password.focus();
					return false;
				}

				if (what.selectedIndex < 1) {
					alert("Please enter your course.");
					what.focus();
					return false;
				}
			

				return true;
			}
	
	</script>

		<style>
			div {
				box-sizing: border-box;
				width: 100%;
				border: 100px solid black;
				float: left;
				align-content: center;
				align-items: center;
			}

			form {
				margin: 0 auto;
				width: 600px;
			}
		</style>
		<title>Assignment 1</title>
	</head>

	<body>
		<h1 style="text-align: center;">REGISTRATION FORM</h1>
		<form name="RegForm" action=""
			onsubmit="return myMethod()" method="post">
			<p><b>Name:</b > <br><input type="text"
							size="65" name="Name" /></p>
			<p><b>Address:</b > <br><input type="text"
							size="65" name="Address" />
		</p>
			<p><b>E-mail Address: </b ><br><input type="text"
							size="65" name="EMail" /></p>
			<p><b>Password:</b > <br><input type="text"
						size="65" name="Password" /></p>
			<p><b>Telephone: </b ><br><input type="text"
						size="65" name="Telephone" /></p>

			<p>
				<b>SELECT YOUR COURSE</b ><br>
				<select type="text" value="" name="Subject">
					<option>BTECH</option>
					<option>BBA</option>
					<option>BCA</option>
					<option>B.COM</option>
					<option>GEEKFORGEEKS</option>
				</select>
			</p>
			<br />
			<br />
			<p><b>Comments(optional): </b ><br><textarea cols="55"
							name="Comment"> </textarea></p>
			<p>
				<input type="submit"
					value="send" name="Submit" />
				<input type="reset"
					value="Reset" name="Reset" />
			</p>
		</form>
	</body>
</html>