Scribd
Upload
3 views6 pages

Practice Pattern

The document outlines two HTML forms: one for employee registration and another for vehicle service details. The employee form includes fields like Employee ID, Name, Date of Birth, Email, Mobile Number, and Address with specific validation rules. The vehicle service form captures details such as Vehicle Number, Name, Color, Maker's Name, Model Name, Model Year, Pickup and Delivery Dates, and Estimate, also with defined validation criteria.

Uploaded by

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

Practice Pattern

The document outlines two HTML forms: one for employee registration and another for vehicle service details. The employee form includes fields like Employee ID, Name, Date of Birth, Email, Mobile Number, and Address with specific validation rules. The vehicle service form captures details such as Vehicle Number, Name, Color, Maker's Name, Model Name, Model Year, Pickup and Delivery Dates, and Estimate, also with defined validation criteria.

Uploaded by

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

24MCA0131

L45+L46

SCHOOL OF COMPUTER SCIENCE ENGINEERING AND


INFORMATION SYSTEMS
WINTER SEMESTER 2024-2025
PMCA601P – FULL STACK WEB DEVELOPMENT LAB
Faculty Name(s): Dr.B.Senthil Murugan
Student Name: Vansh Jain Regno.: 24MCA0131

01. Design the HTML form for feeding the details of newly joined employee. Details include
Employee ID, Employee Name, Date of Birth, Email, Mobile Number and Permanent
Address. Maintain the non-editable Age field that would display the age in years. To enable
successful submission of form ensure
a. Email ID is of more than 14 in length. Number of characters between @ and ‘.’(dot)
should not be more than 5 and number of characters after ‘. (dot) is not more than 3.
(Use Regular Expression Validation)
b. Mobile Number field should accept only numbers and it should not be less than 10
c. Address field length should be limited to 25 characters.
d. Name field should not include any special characters. (White space allowed)
e. Employee ID should be a combination of both alphabets and numeric values.
f. DoB should not be less than 1975.

<!DOCTYPE html>
<html>
<head>
<title>Employee Registration</title>
<script>
function calculateAge() {
var dobInput = document.getElementById("dob");
var ageInput = document.getElementById("age");
var today = new Date();
var birthDate = new Date(dobInput.value);

if (birthDate > today) {


ageInput.value = "Invalid Date of Birth";
return;
}

var age = today.getFullYear() - birthDate.getFullYear();


var m = today.getMonth() - birthDate.getMonth();

if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {


age--;
}

ageInput.value = age;
}
24MCA0131

</script>
</head>
<body>

<h2>Employee Registration</h2>

<form>
<label for="employeeId">Employee ID:</label>
<input type="text" id="employeeId" name="employeeId" pattern="[A-Za-
z0-9]*[A-Za-z]+[0-9]+[A-Za-z0-9]*" title="Employee ID must contain both
alphabets and numbers" required><br><br>

<label for="employeeName">Employee Name:</label>


<input type="text" id="employeeName" name="employeeName" pattern="[a-
zA-Z\s]+" title="Employee Name should not contain special characters"
required><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" onchange="calculateAge()"
min="1975-01-01" ><br><br>

<label for="age">Age:</label>
<input type="text" id="age" name="age" readonly><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-
]+@[a-z0-9.-]+\.[a-z]{2,3}$"
title="Email must be in valid format" required><br><br>

<label for="mobile">Mobile Number:</label>


<input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}"
title="Mobile Number must be 10 digits" required><br><br>

<label for="address">Permanent Address:</label>


<input type="text" id="address" name="address" maxlength="25"
required><br><br>

<input type="submit" value="Submit">


</form>

</body>
</html>
24MCA0131

02. Assume the vehicle service station offers service for all vehicles of Maruthi and Hyundai.
Design the HTML form to capture the details of the vehicle owned by the owner. Details may
include Vehicle Number, Vehicle Name , Color, Maker’s Name, Model Name, Model
Year, Date of Pick up, Tentative Date of Delivery, Approximate Estimate.
a. Use Radio Button for Maker’s Name.
b. Ensure the vehicle’s model entered by the user is of the respective Maker’s. (Say the
user have selected Maruthi as per Radio Button, then entering ‘Vento’ as Model’s
name is not valid)
c. Model Year should not be less than 2000
d. Date of Pickup should be always the today’s date. It is not editable.
e. Date of Delivery should not be lesser than Date of Pickup
f. Estimate amount field should capture only amount
g. Vehicle Number is of the Format : TN(space)23(space)CC(space)1000.
i. Always start with an Upper case Alphabets of length 2
ii. Followed by space
iii. Followed by 2 digit exactly
iv. Followed by space
v. Followed by 4 digit number
(Use Regular Expression Validation)

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
24MCA0131

<title>Vehicle Service Form</title>


<style>
label {
display: block;
margin: 10px 0 5px;
}
</style>
<script>
function validateModel() {
const maker =
document.querySelector('input[name="maker"]:checked').value;
const modelName =
document.getElementById('modelName').value.toLowerCase();
const validModels = {
"maruthi": ["swift", "alto", "dzire", "baleno"],
"hyundai": ["i10", "i20", "creta", "verna"]
};

if (!validModels[maker].includes(modelName)) {
alert("Invalid model name for the selected maker.");
return false;
}
return true;
}

function validateForm(event) {
const datePickup = document.getElementById('datePickup').value;
const dateDelivery =
document.getElementById('dateDelivery').value;

if (new Date(dateDelivery) < new Date(datePickup)) {


alert("Date of Delivery cannot be earlier than Date of
Pickup.");
event.preventDefault();
}

const estimate = document.getElementById('estimate').value;


if (isNaN(estimate) || estimate <= 0) {
alert("Estimate amount must be a valid positive number.");
event.preventDefault();
}
}
</script>
</head>
<body>
<h1>Vehicle Service Form</h1>
<form onsubmit="return validateModel();" method="post">
<label for="vehicleNumber">Vehicle Number:</label>
24MCA0131

<input type="text" id="vehicleNumber" name="vehicleNumber" required


pattern="[A-Z]{2} [0-9]{2} [A-Z]{2} [0-9]{4}"
title="Format: TN 23 CC 1000">

<label for="vehicleName">Vehicle Name:</label>


<input type="text" id="vehicleName" name="vehicleName" required>

<label for="color">Color:</label>
<input type="text" id="color" name="color" required>

<label>Maker's Name:</label>
<input type="radio" id="maruthi" name="maker" value="maruthi"
required>
<label for="maruthi">Maruthi</label>
<input type="radio" id="hyundai" name="maker" value="hyundai">
<label for="hyundai">Hyundai</label>

<label for="modelName">Model Name:</label>


<input type="text" id="modelName" name="modelName" required>

<label for="modelYear">Model Year:</label>


<input type="number" id="modelYear" name="modelYear" min="2000"
required>

<label for="datePickup">Date of Pickup:</label>


<input type="text" id="datePickup" name="datePickup" value="" required
readonly>

<label for="dateDelivery">Tentative Date of Delivery:</label>


<input type="date" id="dateDelivery" name="dateDelivery" value=""
readonly required>

<label for="estimate">Approximate Estimate (in INR):</label>


<input type="number" id="estimate" name="estimate" pattern="[0-9]+"

required>

<button type="submit" onclick="validateForm(event)">Submit</button>


</form>

<script>
document.getElementById('datePickup').value = new
Date().toLocaleDateString();
</script>
</body>
</html>
24MCA0131

You might also like