Scribd
Upload
21 views6 pages

Lab 3

Uploaded by

Maaz Sayyed
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
21 views6 pages

Lab 3

Uploaded by

Maaz Sayyed
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/ 6

WT LAB

ASSIGNMENT - 3
Name: Ayush Vidhale
TY IT/A
Batch - 3
Roll no.: 77
PRN No.: 12111398

Problem Statement:
LAB3: Design a HTML form for student registration and perform validation using javascript

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Student Registration</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}

h2 {
color: #4caf50;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 5px;
}

input,
select,
textarea {
margin-bottom: 10px;
padding: 8px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
</style>
</head>

<body>
<h2>Student Registration Form</h2>

<form action="#" method="post" onsubmit="return validateForm()">


<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required />

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName" required />

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>

<label for="email">Email:</label>
<input type="text" id="email" name="email" required />

<label for="phoneNumber">Phone Number:</label>


<input type="text" id="phoneNumber" name="phoneNumber" required />

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required
/>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female"
required />
<label for="female">Female</label>

<label for="dob">Date of Birth (YYYY-MM-DD):</label>


<input type="text" id="dob" name="dob" required />

<label for="course">Select Course:</label>


<select id="course" name="course" required>
<option value="" disabled selected>Select Course</option>
<option value="computerScience">Computer Science</option>
<option value="biology">Biology</option>
<option value="mathematics">Mathematics</option>
</select>

<label for="studentType">Student Type:</label>


<select id="studentType" name="studentType" required>
<option value="" disabled selected>Select Student Type</option>
<option value="regular">Regular</option>
<option value="partTime">Part-Time</option>
</select>

<label for="file">Upload File:</label>


<input
type="file"
id="file"
name="file"
accept=".pdf, .doc, .docx"
required
/>

<button type="submit">Submit</button>
</form>

<script>
function validateForm() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
var phoneNumber = document.getElementById("phoneNumber").value;
var gender =
document.querySelector('input[name="gender"]:checked');
var dob = document.getElementById("dob").value;
var course = document.getElementById("course").value;
var studentType = document.getElementById("studentType").value;
var file = document.getElementById("file").value;

// Check if all required fields are filled


if (
!firstName ||
!lastName ||
!address ||
!email ||
!phoneNumber ||
!gender ||
!dob ||
course === "" ||
studentType === "" ||
!file
) {
alert("Please fill in all required fields");
return false;
}

// Validate email format


var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address");
return false;
}

// Validate phone number format (allow only digits and optional


hyphens)
var phoneRegex = /^\d+(-\d+)*$/;
if (!phoneRegex.test(phoneNumber)) {
alert("Please enter a valid phone number");
return false;
}

// Validate date of birth format (YYYY-MM-DD)


var dobRegex = /^\d{4}-\d{2}-\d{2}$/;
if (!dobRegex.test(dob)) {
alert("Please enter a valid date of birth (YYYY-MM-DD)");
return false;
}

// Add more specific validation for file type and size if needed

return true;
}
</script>
</body>
</html>
----THE END --

You might also like