Scribd
Upload
3 views

Exercise 4 - Form Validation Using Java Script (1)

The document outlines the design and validation of an HTML form for student records using JavaScript. It includes source code for a registration form that validates user ID, password, username, country, ZIP code, email, and gender. The output confirms that the form was successfully designed and validated.

Uploaded by

Jaggi Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Exercise 4 - Form Validation Using Java Script (1)

The document outlines the design and validation of an HTML form for student records using JavaScript. It includes source code for a registration form that validates user ID, password, username, country, ZIP code, email, and gender. The output confirms that the form was successfully designed and validated.

Uploaded by

Jaggi Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Ex. No.

: 4
Design HTML form for keeping student record and validate it using Java script.
Date:

Aim:
To design HTML form for keeping student record and validate it using Java script.

Source Code: Registration.html


<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a Student 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. " />
<style type='text/css' />
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {


float: left;
margin-bottom: 10px;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
</style>
<script>
//user id validation starts
function userid_validation(){
'use strict';
var userid_name = document.getElementById("userid");
var userid_value = document.getElementById("userid").value;
var userid_length = userid_value.length;
if(userid_length<7 || userid_length>12)
{
document.getElementById('uid_err').innerHTML = 'Value must not be less than 7 characters and
greater than 12 characters';
userid_name.focus();
document.getElementById('uid_err').style.color = "#FF0000";
}
else
{
document.getElementById('uid_err').innerHTML = 'Valid user id';
document.getElementById('uid_err').style.color = "#00AF33";
}
}
//user id validation ends
//password validation starts
function passwd_validation(){
'use strict';
var passid_name = document.getElementById("passid");
var passid_value = document.getElementById("passid").value;
var passid_length = passid_value.length;
if(passid_length<6)
{
document.getElementById('passwd_err').innerHTML = 'Password must be at least 6 chracters
long';
passid_name.focus();
document.getElementById('passwd_err').style.color = "#FF0000";
}
else
{
document.getElementById('passwd_err').innerHTML = 'Valid password';
document.getElementById('passwd_err').style.color = "#00AF33";
}
}
//password validation ends
//user name validation starts
function username_validation(){
'use strict';
var username_name = document.getElementById("username");
var username_value = document.getElementById("username").value;
var username_length = username_value.length;
var letters = /^[0-9a-zA-Z]+$/;
if(username_length < 4 || !username_value.match(letters))
{
document.getElementById('name_err').innerHTML = 'Username must be 4 chracters long and
alphanuric chracters only.';
username_name.focus();
document.getElementById('name_err').style.color = "#FF0000";
}
else
{
document.getElementById('name_err').innerHTML = 'Valid username';
document.getElementById('name_err').style.color = "#00AF33";
}
}
//user name validation ends
//country validation starts
function country_validation(){
'use strict';
var country_name = document.getElementById("country");
var country_value = document.getElementById("country").value;
if(country_value === "Default" || country_value === "--")
{
document.getElementById('country_err').innerHTML = 'You must select a country';
country_name.focus();
document.getElementById('country_err').style.color = "#FF0000";
}
else
{
document.getElementById('country_err').innerHTML = 'Country selected.';
document.getElementById('country_err').style.color = "#00AF33";
}
}
//country validation ends
//zip validation starts
function zip_validation(){
'use strict';
var numbers = /^[0-9]+$/;
var zip_name = document.getElementById("zip");
var zip_value = document.getElementById("zip").value;
var zip_length = zip_value.length;
if(!zip_value.match(numbers) || zip_length !== 5)
{
document.getElementById('zip_err').innerHTML = 'You must enter a ZIP code, which must be
numeric and must be at least 5 chracters long.';
zip_name.focus();
document.getElementById('zip_err').style.color = "#FF0000";
}
else
{
document.getElementById('zip_err').innerHTML = 'ZIP code entered';
document.getElementById('zip_err').style.color = "#00AF33";
}
}
//zip validation ends
//email validation starts
function email_validation(){
'use strict';
var mailformat = /^\w+([\.\-]?\w+)*@\w+([\.\-]?\w+)*(\.\w{2,3})+$/;
var email_name = document.getElementById("email");
var email_value = document.getElementById("email").value;
var email_length = email_value.length;
if(!email_value.match(mailformat) || email_length === 0)
{
document.getElementById('email_err').innerHTML = 'This is not a valid email format.';
email_name.focus();
document.getElementById('email_err').style.color = "#FF0000";
}
else
{
document.getElementById('email_err').innerHTML = 'Valid email format';
document.getElementById('email_err').style.color = "#00AF33";
}
}
//email validation ends
//gender validation starts
function gender_validation(){
'use strict';
if ( (document.getElementById("msex").checked === false) &&
(document.getElementById("fsex").checked === false)){
document.getElementById('gender_err').innerHTML = 'Please slect a geneder.';
document.getElementById('gender_err').style.color = "#FF0000";
document.getElementById("msex").checked = true;
}
else
{
document.getElementById('gender_err').innerHTML = 'Gender selected';
document.getElementById('gender_err').style.color = "#00AF33";
}
}
//gender validation ends

</script>
</head>
<body>
<h1>Student Registration Form</h1>
<form name='registration'>
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" id="userid" size="12"
onBlur="userid_validation();"/><span id="uid_err"></span></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" id="passid" size="12"
onBlur="passwd_validation();"/><span id="passwd_err"></span></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" id="username" size="50"
onBlur="username_validation();" /><span id="name_err"></span></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" id="address" size="50" /><span
id="add_err"></span></li>
<li><label for="country">Country:</label></li>
<li><select id="country" name="country" onBlur="country_validation();">
<option selected="" value="Default">(Please select a country)</option>
<option value="--">none</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select><span id="country_err"></span></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" id="zip" onBlur="zip_validation();" /><span
id="zip_err"></span></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" id="email" size="50"
onBlur="email_validation();"/><span id="email_err"></span></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" id="msex" value="Male"
onBlur="gender_validation();" /><span>Male</span></li>
<li><input type="radio" name="fsex" id="fsex" value="Female" /><span>Female</span><span
id="gender_err"></span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>

OUTPUT:
Result:
Thus, the HTML form for keeping student record was designed and validated it using Java script
and output was verified.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy