VNSGU BCA Sem 3: Web Designing (305-1) Practical Solutions - April 2025 Set B
Paper Information
| Attribute | Value |
|---|---|
| Subject | Web Designing - I |
| Subject Code | 305-1 |
| Set | B |
| Semester | 3 |
| Month/Year | April 2025 |
| Max Marks | 25 |
| Paper | View Paper | Download PDF |
Questions & Solutions
Q1: Responsive Sign Up/Registration Page
Max Marks: 20
Create Responsive (use bootstrap) Sign Up form / Registration page that includes at least following fields: Full Name, User Name, Password, Confirm Password, Address (Use Textarea), Gender (Use Radio button), Mobile Number, Email Id, City, State (Use Dropdown), Submit and Reset buttons. Use JavaScript to validate following: (1) User name (Must not be blank) (2) Password and confirm password must be same. (3) Mobile number (must be 10 digits)
1. Concept Explanation
Form Layouts with Bootstrap 5
Bootstrap provides the .form-control class for inputs and textareas, .form-select for dropdowns, and .form-check for radio/checkbox groups. We use a grid layout (.row and .col-md-6) to create a multi-column form that dynamically collapses into a single-column stack on mobile devices.
JavaScript Form Validation
When the user submits a form, we intercept the submit action using event.preventDefault(). We perform three validation checks:
- Blank Username: Check if
username.trim() === "". - Confirm Password: Compare if
password === confirmPassword. - Mobile Number: Validate using a regular expression:
/^[0-9]{10}$/(which checks that the string contains exactly 10 digits).
2. Algorithm & Step-by-Step Logic
- HTML Setup: Build the form fields using semantic labels and unique IDs. Use Bootstrap container class
.containerto center and align the card layout. - Radio Buttons & Textarea Styling: Add
form-check-inputto the radios and arows="3"attribute to the address<textarea>. - Dropdown Elements: Build a dynamic select dropdown for States and Cities.
- JavaScript Interception:
- Bind a submit event listener to the form element.
- Implement validation logic (Trim username check, password matching, 10-digit numeric mobile test).
- Show error messages or add Bootstrap red styling classes (
is-invalid) to fields that fail checks. - If all checks pass, show a success modal/alert and allow submission.
3. Implementation Code & Output
View Solution & Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Registration Form</title>
<!-- Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f1f3f7;
}
.form-container {
max-width: 700px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container py-5 min-vh-100 d-flex align-items-center justify-content-center">
<div class="form-container p-4 w-100">
<h3 class="text-center mb-4 text-dark fw-bold border-bottom pb-3">Student Registration Portal</h3>
<form id="registrationForm">
<!-- Row 1: Full Name & Username -->
<div class="row mb-3">
<div class="col-md-6">
<label for="fullName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" required placeholder="Enter full name">
</div>
<div class="col-md-6">
<label for="userName" class="form-label">Username</label>
<input type="text" class="form-control" id="userName" placeholder="Enter username">
<div id="usernameError" class="invalid-feedback">Username cannot be blank.</div>
</div>
</div>
<!-- Row 2: Password & Confirm Password -->
<div class="row mb-3">
<div class="col-md-6">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required placeholder="Create password">
</div>
<div class="col-md-6">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" required placeholder="Re-enter password">
<div id="passwordError" class="invalid-feedback">Passwords must match exactly.</div>
</div>
</div>
<!-- Row 3: Mobile & Email -->
<div class="row mb-3">
<div class="col-md-6">
<label for="mobile" class="form-label">Mobile Number</label>
<input type="text" class="form-control" id="mobile" placeholder="10-digit mobile number">
<div id="mobileError" class="invalid-feedback">Mobile number must contain exactly 10 digits.</div>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email ID</label>
</div>
</div>
<!-- Row 4: Address -->
<div class="mb-3">
<label for="address" class="form-label">Residential Address</label>
<textarea class="form-control" id="address" rows="3" required placeholder="Street name, Area, City..."></textarea>
</div>
<!-- Row 5: Gender (Radio Buttons) -->
<div class="mb-3">
<label class="form-label d-block">Gender</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="genderMale" value="Male" checked>
<label class="form-check-input-label" for="genderMale">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="genderFemale" value="Female">
<label class="form-check-input-label" for="genderFemale">Female</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="genderOther" value="Other">
<label class="form-check-input-label" for="genderOther">Other</label>
</div>
</div>
<!-- Row 6: City & State (Dropdowns) -->
<div class="row mb-4">
<div class="col-md-6">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="" disabled selected>Select State</option>
<option value="Gujarat">Gujarat</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Delhi">Delhi</option>
<option value="Karnataka">Karnataka</option>
</select>
</div>
<div class="col-md-6">
<label for="city" class="form-label">City</label>
<select class="form-select" id="city" required>
<option value="" disabled selected>Select City</option>
<option value="Surat">Surat</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
<option value="Bengaluru">Bengaluru</option>
</select>
</div>
</div>
<!-- Row 7: Buttons -->
<div class="row">
<div class="col-6 d-grid">
<button type="submit" class="btn btn-dark btn-lg">Submit</button>
</div>
<div class="col-6 d-grid">
<button type="reset" class="btn btn-outline-secondary btn-lg" id="resetBtn">Reset</button>
</div>
</div>
</form>
</div>
</div>
<!-- JavaScript Logic -->
<script>
const form = document.getElementById('registrationForm');
const userName = document.getElementById('userName');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const mobile = document.getElementById('mobile');
// Error Feedback Elements
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
const mobileError = document.getElementById('mobileError');
form.addEventListener('submit', function(event) {
// Prevent submission to perform checks
event.preventDefault();
// Clear previous error states
let isValid = true;
[userName, confirmPassword, mobile].forEach(el => el.classList.remove('is-invalid'));
// 1. Validate Username (Must not be blank)
if (userName.value.trim() === "") {
userName.classList.add('is-invalid');
isValid = false;
}
// 2. Validate Password matches Confirm Password
if (password.value !== confirmPassword.value) {
confirmPassword.classList.add('is-invalid');
isValid = false;
}
// 3. Validate Mobile number (must be exactly 10 digits)
const mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile.value)) {
mobile.classList.add('is-invalid');
isValid = false;
}
// If validation succeeds
if (isValid) {
alert("Registration Submitted Successfully!");
form.reset();
}
});
// Reset error styling on Reset Button Click
document.getElementById('resetBtn').addEventListener('click', function() {
[userName, confirmPassword, mobile].forEach(el => el.classList.remove('is-invalid'));
});
</script>
</body>
</html>
💡 Common Examination Mistakes & Tips
Key Pitfalls to Avoid
- Form Reset Issues: When using radio buttons, make sure that resetting the form leaves one of the buttons checked by default (e.g.
checkedparameter). - No Textarea Name/Label: Do not put the value of the textarea inside the tags like
<textarea>value</textarea>. Keep the tags empty and use theplaceholderattribute instead. - Invalid Numeric Checks: Using
isNaN(mobile.value)is not enough to validate a mobile number. An input like"12345"is numeric but not a valid 10-digit number. Always use a Regex check:/^\d{10}$/.