Table of Contents

Simple Form Validation Using HTML and JavaScript

In this post, we can learn about a simple student registration form in HTML with javascript validation form using the javascript program. Simple and basic Code using this Form Validation.

These are easily created by HTML code with Javascript. In this form you can check the user input information is correct or wrong using javascript code to avoid wrong information about the user.

We should use simple editor software like Sublime Text or Notepad++ etc…

1.File Name [Student.html]

<!DOCTYPE html>
<html>
<head>
	<title>Html Form page</title>

<script>
	function validateform(){
		var fname = document.form.fname.value;
		var lname = document.form.lname.value;
		var age = document.form.age.value;
		var email =document.form.email.value;
		var emailformat =  /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; 
		if (fname =="") {
			alert("Pleas Fill  firstname");
			document.form.fname.focus();
			return false;
		}
		else if(lname == ""){
			alert("please Fill last name")
			document.form.lname.focus();
			return false;

		}
		else if (age =="") {
			alert("please Fill AGE")
			document.form.age.focus();
			return false;

		}
		else if (email =="") {
			alert("please Fill email")
			document.form.email.focus();
			return false;
		}
		}
		
		function onfocuscolor(){
			document.getElementById("address").style.background="yellow"; 

		} 
     </script>
</head>
<body>
<h1 align="center">STUDENT REGISTRATION FORM</h1>  

<form name="form" action="register.html" method="post" onsubmit=" return validateform()">
	
         <label for="fname"><b>1.FIRST NAME:</b></label>
         <input type="text" id="fname" name="fname"><br><br>
         <label for="lname"><b>2.LAST NAME:</b></label>
         <input type="text" id="lname" name="lname"><br><br>
         <label for="age"><b>3.YOUR AGE:</b></label>
         <input type="text" id="age" name="age" onkeyup="numbersonlyallwed(this)"><br><br>
         <label for="email"><b>4.EMAIL ID:</b></label>
         <input type="email" id="email" name="email"><br><br>
         <label for="birthday"><b>5.DATE OF BIRTH</b></label>
		 <input type="date" id="birthday" name="birthday"><br><br>
		<label><B>6.GENDER</B></label><br>
		<input type="radio" id="gender" name="gender" value="Male"/>Male<br>
		<input type="radio" id="gender" name="gender" value="Female"/>Female<br>
		<input type="radio" id="gender" name="gender" value="Other"/>Other<br><br>
		<label><B>7.CHOOSE YOUR DEPARTMENT</b></label>
  <select>
    <option value="volvo">B.TECH (IT) </option>
    <option value="saab">BE (MECH)</option>
    <option value="fiat">BE (CIVIL)</option>
    <option value="audi">BE (ECE)</option>
  </select><br><br>
  <label for="number"><b>8.COLLAGE NAME:</b></label>
		 <input type="text" id="collage_name" name="collage_name"><br><br>
  <label for="number"><b>9.MOBILE NUMBER:</b></label>
		 <input type="text" id="number" name="number"><br>
		
	<br><B>10.ENTER YOUR ADDRESS</b><br>
		<textarea id="address" onfocus="onfocuscolor()"></textarea><br><br>
		<input type="submit" value="REGISTRATION"><br><br>
</form>
</body>
</html>