VNSGU BCA Sem 3: Web Designing (305-1) Practical Solutions - April 2025 Set A
Paper Information
| Attribute | Value |
|---|---|
| Subject | Web Designing - I |
| Subject Code | 305-1 |
| Set | A |
| Semester | 3 |
| Month/Year | April 2025 |
| Max Marks | 25 |
| Paper | View Paper | Download PDF |
Questions & Solutions
Q1: Password Validation Form
Max Marks: 20
Create responsive Password Validation Form using HTML and Bootstrap. Use JavaScript to do the following validations. Password must contain: (a) Capital Letter(s) and Lower case letter(s) (b) Digit(s) (c) Length is minimum 8 characters (B) Password and Confirm Password must be same
1. Concept Explanation
Responsive Layouts with Bootstrap
Bootstrap is a powerful, mobile-first CSS framework. It uses a 12-column grid system based on Flexbox to make websites responsive on desktops, tablets, and smartphones. We will use:
containerandrowfor grid alignments.card,card-header, andcard-bodyto create a polished form box.mb-3(margin-bottom) andform-label/form-controlfor neat form layouts.
Password Rule Checking (JavaScript Regex)
Instead of checking rules only on form submission, we can write an event listener in JavaScript that checks constraints in real-time as the user types (using the input event).
- Uppercase Check:
/[A-Z]/ - Lowercase Check:
/[a-z]/ - Digit Check:
/\d/or/[0-9]/ - Length Check:
password.length >= 8
2. Algorithm & Step-by-Step Logic
- HTML Structure: Create an input field for Email/Username, Password, and Confirm Password. Add helper text divs below the password input to show validation feedback (e.g. "At least 8 characters").
- Bootstrap Styling: Wrap the form inside a centered card that adjusts in width based on screen size (e.g.
col-md-6 col-lg-4). - Real-Time Validation JS:
- Bind an event listener to the password input field.
- Test the input string against regular expressions for capital letter, lowercase letter, digit, and length.
- Change the CSS classes of validation checkmarks dynamically (e.g., text-danger to text-success).
- Confirm Password JS:
- Bind a submit event listener to the form.
- If any of the password rules are not met, or if
Password !== Confirm Password, block submission usingevent.preventDefault()and alert the user.
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 Password Validation Form</title>
<!-- Link to Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f4f6f9;
}
.validation-rule {
font-size: 0.85rem;
transition: all 0.3s ease;
}
.rule-valid {
color: #198754; /* Bootstrap Success Green */
font-weight: 500;
}
.rule-invalid {
color: #dc3545; /* Bootstrap Danger Red */
}
</style>
</head>
<body>
<div class="container min-vh-100 d-flex align-items-center justify-content-center py-5">
<div class="card shadow-lg w-100" style="max-width: 500px;">
<div class="card-header bg-dark text-white text-center py-3">
<h4 class="mb-0">Secure Password Verification</h4>
</div>
<div class="card-body p-4">
<form id="passwordForm">
<!-- Username/Email Field -->
<div class="mb-3">
<label for="userEmail" class="form-label">Email Address</label>
</div>
<!-- Password Field -->
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required placeholder="Enter password">
<!-- Password Validation Requirements List -->
<div class="mt-3 p-2 bg-light border rounded">
<p class="mb-1 fw-semibold text-secondary small">Requirements:</p>
<div id="ruleLength" class="validation-rule rule-invalid mb-1">
❌ Min 8 characters
</div>
<div id="ruleUpper" class="validation-rule rule-invalid mb-1">
❌ At least one Capital letter
</div>
<div id="ruleLower" class="validation-rule rule-invalid mb-1">
❌ At least one Lowercase letter
</div>
<div id="ruleDigit" class="validation-rule rule-invalid mb-0">
❌ At least one Digit (0-9)
</div>
</div>
</div>
<!-- Confirm Password Field -->
<div class="mb-4">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" required placeholder="Re-enter password">
<div id="matchFeedback" class="form-text mt-2 small"></div>
</div>
<!-- Submit Button -->
<div class="d-grid">
<button type="submit" class="btn btn-dark btn-lg">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
<!-- JavaScript Logic -->
<script>
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
const form = document.getElementById('passwordForm');
// Rule Elements
const ruleLength = document.getElementById('ruleLength');
const ruleUpper = document.getElementById('ruleUpper');
const ruleLower = document.getElementById('ruleLower');
const ruleDigit = document.getElementById('ruleDigit');
const matchFeedback = document.getElementById('matchFeedback');
// State validation flags
let isLengthValid = false;
let isUpperValid = false;
let isLowerValid = false;
let isDigitValid = false;
// 1. Real-time validation as user types
passwordInput.addEventListener('input', function() {
const val = passwordInput.value;
// Check A: Length is minimum 8 characters
isLengthValid = val.length >= 8;
updateRuleUI(ruleLength, isLengthValid, "Min 8 characters");
// Check B: Contains Capital letter(s)
isUpperValid = /[A-Z]/.test(val);
updateRuleUI(ruleUpper, isUpperValid, "At least one Capital letter");
// Check C: Contains Lowercase letter(s)
isLowerValid = /[a-z]/.test(val);
updateRuleUI(ruleLower, isLowerValid, "At least one Lowercase letter");
// Check D: Contains Digit(s)
isDigitValid = /[0-9]/.test(val);
updateRuleUI(ruleDigit, isDigitValid, "At least one Digit (0-9)");
// Trigger confirm match checks if confirm password has input
if (confirmPasswordInput.value.length > 0) {
checkPasswordMatch();
}
});
// 2. Validate password match
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
function checkPasswordMatch() {
const pass = passwordInput.value;
const confirmPass = confirmPasswordInput.value;
if (pass === confirmPass && pass.length > 0) {
matchFeedback.textContent = "✓ Passwords match successfully.";
matchFeedback.className = "form-text text-success fw-medium";
} else {
matchFeedback.textContent = "❌ Passwords do not match.";
matchFeedback.className = "form-text text-danger";
}
}
// Helper function to update the requirement checklist colors
function updateRuleUI(element, isValid, message) {
if (isValid) {
element.textContent = "✓ " + message;
element.className = "validation-rule rule-valid";
} else {
element.textContent = "❌ " + message;
element.className = "validation-rule rule-invalid";
}
}
// 3. Form Submission Verification
form.addEventListener('submit', function(event) {
// Prevent default submission to do validation checks
event.preventDefault();
// Check if all rules are satisfied
if (!isLengthValid || !isUpperValid || !isLowerValid || !isDigitValid) {
alert("Please satisfy all password rules before submitting.");
return;
}
// Check if passwords are matching
if (passwordInput.value !== confirmPasswordInput.value) {
alert("Passwords do not match. Please check again.");
return;
}
// Success
alert("Registration Successful!");
form.reset();
// Reset requirement statuses
updateRuleUI(ruleLength, false, "Min 8 characters");
updateRuleUI(ruleUpper, false, "At least one Capital letter");
updateRuleUI(ruleLower, false, "At least one Lowercase letter");
updateRuleUI(ruleDigit, false, "At least one Digit (0-9)");
matchFeedback.textContent = "";
});
</script>
</body>
</html>
💡 Common Examination Mistakes & Tips
Key Pitfalls to Avoid
- Bootstrap Grid Placement: Keep the form inside
.container,.row, and.colblocks so it scales down on narrow devices (like mobile phones) instead of overflowing. - Event listener scope: Do not check rules only inside the form
submitevent. Real-time checking (oninputorkeyup) makes the application feel interactive and dynamic, earning higher practical marks. - Strict Confirm Match: Ensure the match check happens both when modifying the password field and when modifying the confirm password field.