Scribd
Upload
17 views

File 3

Uploaded by

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

File 3

Uploaded by

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

Question : Create a student registration form using text, radio button, check box,

drop down box, text field and all other required HTML elements. Customize the CSS
and javascript to input and validate all data Create functions to perform
validation of each element, example:

• Roll number is a 7-digit numeric value

• Name should be an alphabetical value (String)

• Non-empty and valid fields like DOB

Ans. HTML (Student Registration Form)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="form-container">
<h2>Student Registration Form</h2>
<form id="studentForm" onsubmit="return validateForm()">

<!-- Roll Number -->


<label for="rollNo">Roll Number:</label>
<input type="text" id="rollNo" name="rollNo" required placeholder="Enter your
7-digit Roll Number">
<small id="rollNoError" class="error"></small>

<!-- Name -->


<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your
name">
<small id="nameError" class="error"></small>

<!-- Gender -->


<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label>
<small id="genderError" class="error"></small>

<!-- Date of Birth -->


<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<small id="dobError" class="error"></small>

<!-- Course -->


<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="">Select a Course</option>
<option value="Computer Science">Computer Science</option>
<option value="Mathematics">Mathematics</option>
<option value="Engineering">Engineering</option>
</select>
<small id="courseError" class="error"></small>

<!-- Subjects -->


<label>Subjects:</label>
<input type="checkbox" id="subject1" name="subjects" value="Physics">
<label for="subject1">Physics</label>

<input type="checkbox" id="subject2" name="subjects" value="Chemistry">


<label for="subject2">Chemistry</label>

<input type="checkbox" id="subject3" name="subjects" value="Biology">


<label for="subject3">Biology</label>
<small id="subjectsError" class="error"></small>

<!-- Submit and Reset Buttons -->


<button type="submit">Submit</button>
<button type="reset">Reset</button>

</form>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

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

h2 {
text-align: center;
color: #333;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
input[type="text"], input[type="date"], select {
width: 100%;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}

input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}

.error {
color: red;
font-size: 0.9em;
display: block;
margin-top: 5px;
}

button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}

button[type="submit"] {
background-color: #4CAF50;
color: white;
}

button[type="reset"] {
background-color: #f44336;
color: white;
}

button:hover {
opacity: 0.8;
}

JavaScript (script.js)

// Function to validate the entire form


function validateForm() {
let isValid = true;

// Clear previous error messages


clearErrors();

// Validate Roll Number (7-digit numeric value)


const rollNo = document.getElementById("rollNo").value;
const rollNoError = document.getElementById("rollNoError");
const rollNoPattern = /^\d{7}$/;
if (!rollNo.match(rollNoPattern)) {
rollNoError.textContent = "Roll number must be a 7-digit number.";
isValid = false;
}

// Validate Name (alphabetical string)


const name = document.getElementById("name").value;
const nameError = document.getElementById("nameError");
const namePattern = /^[A-Za-z\s]+$/;
if (!name.match(namePattern)) {
nameError.textContent = "Name must contain only alphabetic characters.";
isValid = false;
}

// Validate Gender selection


const gender = document.querySelector('input[name="gender"]:checked');
const genderError = document.getElementById("genderError");
if (!gender) {
genderError.textContent = "Please select your gender.";
isValid = false;
}

// Validate Date of Birth


const dob = document.getElementById("dob").value;
const dobError = document.getElementById("dobError");
if (!dob) {
dobError.textContent = "Date of Birth is required.";
isValid = false;
}

// Validate Course selection


const course = document.getElementById("course").value;
const courseError = document.getElementById("courseError");
if (!course) {
courseError.textContent = "Please select a course.";
isValid = false;
}

// Validate Subjects (at least one checkbox must be selected)


const subjects = document.querySelectorAll('input[name="subjects"]:checked');
const subjectsError = document.getElementById("subjectsError");
if (subjects.length === 0) {
subjectsError.textContent = "Please select at least one subject.";
isValid = false;
}

return isValid;
}

// Function to clear error messages


function clearErrors() {
const errorMessages = document.querySelectorAll(".error");
errorMessages.forEach(error => error.textContent = "");
}

You might also like