Lab 6

Muhammad Aashir Khan
02-134201-032
LAB 06: JavaScript Form Validation
Task #01: Develop, test and validate HTML document that collects the following information from
the user: last name, first name, middle initial, age (restricted to be greater than 17), and weight
restricted to the range from 80 to 300). You must have event handlers for the form elements that
collect this information. These handlers must check the input data for correctness. Message in alert
windows must be produced when errors are detected.
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Task 1</title>
<script>
function check(){ var

Age=document.myform.Age.value; var
Weight=document.myform.Weight.value;
if(Age<18)
{ alert("You are Underage");
} if(Weight>300 ||
Weight<80)
{ alert("Your Weight is Not Acceptable"); }
}
</script>
</head>
<body>
<form name="myform" onSubmit="return check();">
<table>
<tr>
<td>First Name <span style="color: red">*</span></td>
<td><input type="text" name="FirstName" required></td>
Semester BSCS 4
</tr>
<tr>
<td>Middle Name <span style="color: red">*</span></td>
Department of Computer Sciences 1/9

SEL-310: WEB ENGINEERING LAB 06: JavaScript Form Validation
This study source was downloaded by 100000802943427 from CourseHero.com on 12-03-2022 09:36:27 GMT -06:00
https://www.coursehero.com/file/52826861/Lab5docx/
<td><input type="text" name="MiddleName"
required></td> </tr> <tr>
<td>Last Name <span style="color: red">*</span></td>
<td><input type="text" name="LastName"
required></td> </tr> <tr>
<td>Age <span style="color: red">*</span></td>
<td><input type="text" name="Age" required></td>
</tr>
<tr>
<td>Weight <span style="color: red">*</span></td>
<td><input type="text" name="Weight" required></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Output
Task #02: Design a shipment form used in E-commerce web sites with compulsory fields marked
with red * (star). Use appropriate validations for all the fields. Submit the form only if all the
compulsory fields are filled up and the values are valid, otherwise print the appropriate message
and send the focus to appropriate field.
Source Code
<!doctype html>
<html>
Department of Computer Sciences 2/9 Semester BSCS 4
<head>
<meta charset="utf-8">
<script> function valid(){ var PNo =
/^[0-9]{11}$/; var Z = /^[0-9]
{5}$/;
var PhoneNo = document.myform.Phone.value;

var Zip = document.myform.ZipCode.value;
var Code = new Boolean();

var Number = new Boolean();
Number = PNo.test(PhoneNo);
Code = Z.test(Zip);
if(Code)
{
}
else
{ alert("Invalid Zip Code");
document.myform.ZipCode.value=''
;
document.myform.ZipCode.focus();
return false;
} if(Number)
{
}
else
{ alert("Invalid Phone Number");
document.myform.Phone.value =
'';
document.myform.Phone.focus();
return false;
}
}
</script>
</head>
<body>
<form name="myform" onSubmit="return valid();">
<table>
<tr><th style="font-size: 24px" colspan="2" align="center">Billing
Address</th></tr>
<tr><td colspan="2" align="center">Required Fields<span style="color:

red">*</span></td></tr>
<tr><td></br></td></tr>
<tr><td>Email Address<span style="color: red">*</span></td><td><input

type="email" name="Email" required</td></tr>
<tr><td>First Name<span style="color: red">*</span></td><td><input type="text"
name="FirstName" required</td></tr>
<tr><td>Last Name<span style="color: red">*</span></td><td><input type="text"
name="LastName" required</td></tr>
<tr><td>Adress Line 1<span style="color: red">*</span></td><td><input
type="text" name="Address1" required</td></tr>
<tr><td>Adress Line 2 </td><td><input type="text" name="Address2"</td></tr>
<tr>
<td>Country<span style="color: red">*</span></td><td><select name="Country"
required><option value="1" >Select</option>
<option>United States</option><option>Pakistan</option><option>United
Kingdom</option><option>China</option><option>Russia</option><option>Germany</option></
select></td></tr>
<tr><td>Zip Code<span style="color: red">*</span></td><td><input type="text"
name="ZipCode" required></td></tr>
<tr>
<td>City<span style="color: red">*</span></td><td><input type="text"
name="City" required></td>
</tr>
<tr>
<td>Phone<span style="color: red">*</span></td><td><input type="text"
name="Phone" required</td>
</tr>
<tr><td></br></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Ship to This
Address" name="Submit"</td></tr>
</table>
</form>
</body>
</html>

Output
Task #03: Create a HTML document that collects information for a student course registration form
for Bahrain University. Take input following fields. Write regular expressions for them and validate
the input of the fields.
Registration number
Current semester
Enrolment number
Course code
Show alert mgs on wrong input
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script> function validate(){ var
cc= /[A-Z]{3}-[0-9]{3}/; var En=/[0-9]{2}-[0-9]
{6}-[0-9]{3}/;
var sem=/^[1-8]$/; var Reg=/[0-9]{5}/; var CC=
document.myform.CourseCode.value; var
CS=document.myform.CurrentSemester.value; var
EN=document.myform.EnrolmentNumber.value; var
REG=document.myform.RegistrationNumber.value; var
ebool= new Boolean();
var ebool1= new Boolean();

ebool= cc.test(CC);
ebool1=En.test(EN);
ebool2=sem.test(CS);
ebool3=Reg.test(REG)
if(ebool)
{ }
els
e{
alert("Course Code is Incorrect");
document.myform.CourseCode.value='';
document.myform.CourseCode.focus();
} if(ebool1)
{
}
else
{
alert("Enrolment Numberis Incorrect");
document.myform.EnrolmentNumber.value='';
document.myform.EnrolmentNumber.focus();
} if(ebool2)
{
}
else
{ alert("Current Semester is Incorrect");
document.myform.CurrentSemester.value='';
document.myform.CurrentSemester.focus();
} if(ebool3)
{
}
else
{
alert("Registration Number is Incorrect");
document.myform.RegistrationNumber.value='';
document.myform.RegistrationNumber.focus();
}
if(ebool && ebool1 && ebool2 && ebool3 )

{ alert("Correct Information");
return(true);
}
else
{
return(false);
}
</script>
</head>
<body>
<form name="myform" onsubmit="return(validate());" >
<table border="1"/>
<tr>
<td>Registration Number<span style="color: red">*</span></td>
<td><input type="text" name="RegistrationNumber" ></td></tr>
<tr>
<td>Current Semester<span style="color: red">*</span></td>
<td><input type="text" name="CurrentSemester" ></td></tr>
<tr>
<td>Enrolment Number<span style="color: red">*</span></td>
<td><input type="text" name="EnrolmentNumber"></td></tr>
<tr>
<td>Course Code<span style="color: red">*</span></td>
<td><input type="text" name="CourseCode" ></td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" ></td></tr>
</form>
</table>
</body>
</html>

Output

Powered by TCPDF (www.tcpdf.org)


Lab 6

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 6

Uploaded by

Copyright:

Available Formats

Muhammad Aashir Khan

LAB 06: JavaScript Form Validation

function check(){ var

Department of Computer Sciences 1/9

var PhoneNo = document.myform.Phone.value;

var Code = new Boolean();

Department of Computer Sciences 3/9 Semester BSCS 4

<tr><td>Email Address<span style="color: red">*</span></td><td><input

Department of Computer Sciences 4/9 Semester BSCS 4

Department of Computer Sciences 5/9 Semester BSCS 4

var ebool1= new Boolean();

if(ebool && ebool1 && ebool2 && ebool3 )

Department of Computer Sciences 7/9 Semester BSCS 4

Department of Computer Sciences 8/9 Semester BSCS 4

Department of Computer Sciences 9/9 Semester BSCS 4

You might also like