Student registration form in html with javascript validation

student registration form in html with javascript validation is the exercise that many people have experienced. Most students studying html can do this. However, many people still ask me about this so I decide to share my own way.

student registration form often includes basic information fields. They are easily created by html. However, you should use css to build the layout for a more attractive form. You also can check the input by using javascript, which is to guarantee that the input is imported correctly to avoid the system imprecisely processing. For instance, a human name cannot be a number. Email address must include @ and the corresponding domain is @gmail.com, etc. That we do this step well will facilitate the next data processing stage.

Preparation

You should prepare editor software. You could use phpdesigner or notepad++ or other editors that have similar functions. However, I get used to applying phpdesigner. You should have a default browser or install more browsers such as Google Chrome, Firefox.

Implementation

In order to complete the article student registration form in html with javascript validation, we use the editor and create an index.html file as below

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href="style.css" type='text/css' />
<script src="js.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label for="code">student identification number:</label></li>
<li><input type="text" name="code" size="50" /></li>
<li><label for="code">Class:</label></li>
<li><input type="text" name="class" size="50" /></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>

Create file style.css in the same folder with file index.html with the following content.

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
 
formul li label{
float: left;
clear: left;
width: 250px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
 
formul li input, select, span {
float: left;
margin-bottom: 10px;
}
 
formtextarea {
float: left;
width: 350px;
height: 150px;
}
 
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
 
p {
margin-left: 70px;
font-weight: bold;
}

Next, create file js,js as the content shown hereunder


functionformValidation()
{
varuid = document.registration.userid;
varpassid = document.registration.passid;
varuname = document.registration.username;
varuadd = document.registration.address;
varucountry = document.registration.country;
varuzip = document.registration.zip;
varuemail = document.registration.email;
varumsex = document.registration.msex;
varufsex = document.registration.fsex; if(userid_validation(uid,5,16))
{
if(passid_validation(passid,7,16))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
}
}
}
}
}
}
}
return false;
}
 
functionuserid_validation(uid,mx,my)
{
varuid_len = uid.value.length;
if (uid_len == 0 || uid_len>= my || uid_len< mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
 
functionpassid_validation(passid,mx,my)
{
varpassid_len = passid.value.length;
if (passid_len == 0 ||passid_len>= my || passid_len< mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
functionallLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
functionValidateEmail(uemail)
{
varmailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
functionvalidsex(umsex,ufsex)
{
x=0;
 
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Successfully Submitted');
window.location.reload()
return true;}
}

Above is student registration form in html with javascript validation code.  You could download it to edit, add, or remove fields appropriately.

Enjoy this blog? Please spread the word :)