Student Registration Form in HTML with JavaScript Validation

0 Comments
Student Registration Form in HTML with JavaScript Validation

In this tutorial, I will tell you how to make student registration form in html with javascript validation.

Javascript is basically used to validate HTML pages in web application. Validations are basically some rules to follow when inputting values to register on-site. Validation can be anything like:

  • Some input fields cannot be empty.
  • Some values must be in a particular length range.
  • Some input fields must match (for example, password fields). These are some basic rules that you can make.
  • Validations are just simple things like making fields mandatory.

With the help of validations, we can achieve a lot. We can show the message to the client. You can display this message in the alert box as an error.

So when all fields are filled accurately the user will able to submit the form means add the data otherwise it will show errors.  Purpose of validations is to make sure that data must be correct before submitting the form if the user forgets to add anything.

Here I will take a simple example of the student registration form which contains different types of buttons like radio, reset, submit. So that you can get full overview of the validity of the form.

In this, each button has a different role according to it we put some validations. So, we are going to perform form validation on all input fields and buttons.

Student Registration Form in HTML with JavaScript Validation

Student Registration Form in HTML with JavaScript Validation

index.html

<html>
<head>
<script type="text/javascript" src="http://www.thecrazyprogrammer.com/validateform.js"></script>
<style>
ul list-style-type:none;
form
  background-color: #DCDCDC;

</style>
</head>

<body>
<form action="#" name="StudenSignupForm" onsubmit="return(validateHTMlform());">

<div cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">

<ul>
<li>
<center><font size=4><b>Student Registration Form</b></font></center>
</li>
</ul>

<ul>
<li>First Name</li>
<li><input type=text name=textnames id="textname" size="30"></li>
</ul>

  <ul>
<li>
  Last Name</li>
<li><input type=text name=lastnames id="lastname" size="30"></li>
</ul>
  
<ul>
<li>Father Name</li>
<li><input type="text" name="full_father_name" id="fathername"
size="30"></li>
</ul>


<ul>
<li>Address</li>
<li><input type="text" name="personal_address"
id="personaladdress" size="30"></li>
</ul>

<ul>
<li>Gender</li>
<li><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</li>
</ul>

<ul>
<li>City</li>
<li><select name="City">
<option value="-1" selected>select..</option>
<option value="KOLKATA">KOLKATA</option>
<option value="CHENNAI">CHENNAI</option>
<option value="PUNE">PUNE</option>
<option value="JAIPUR">JAIPUR</option>
</select></li>
</ul>

<ul>
<li>Course</li>
<li><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></li>
</ul>



<ul>
<li>State</li>
<li><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></li>
</ul>
  
  <ul>
<li>District</li>
<li><select name="Disulict">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></li>

</ul>
  
<ul>
<li>PinCode</li>
<li><input type="text" name="pin_code" id="pincode" size="30"></li>

</ul>
<ul>
<li>student email</li>
<li><input type="text" name="email_id" id="emailid" size="30"></li>
</ul>

<ul>
<li>Date Of Birth</li>
<li><input type="text" name="date_of_birth" id="dob" size="30"></li>
</ul>

<ul>
<li>Mobile Number</li>
<li><input type="text" name="mobilenumber" id="mobile_no" size="30"></li>
</ul>
<ul>
<li><input type="reset"></li>
<li colspan="2"><input type="submit" value="Submit Form" /></li>
</ul>
</div>
</form>
</body>
</html>

validateform.js

function validateHTMlform()

           form.pincode.value.length != 6 )
   
     alert( "Enter your pincode in format ######." );
     form.pincode.focus() ;
     return;
   
 var email = form.emailid.value;
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
 if (email == "" 

I hope you got an idea how to make student registration form in html with javascript validation. Comment down below if you have any queries.

The post Student Registration Form in HTML with JavaScript Validation appeared first on The Crazy Programmer.

Leave a Reply

Your email address will not be published. Required fields are marked *