Bootstrap Form Validation
Extended Form Validation Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Extended Form Validation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Form Validation Example</h2>
<!-- Extended Form Validation -->
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">Please provide a username.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">Please provide a valid email address.</div>
<div class="valid-feedback">Email looks valid!</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" minlength="8" required>
<div class="invalid-feedback">Password must be at least 8 characters.</div>
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" required>
<div class="invalid-feedback">Passwords do not match.</div>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number (Format: 123-456-7890)</label>
<input type="text" class="form-control" id="phone" pattern="^\d{3}-\d{3}-\d{4}$" required>
<div class="invalid-feedback">Please enter a valid phone number (e.g., 123-456-7890).</div>
<div class="valid-feedback">Phone number format is correct!</div>
</div>
<div class="mb-3">
<label for="age" class="form-label">Age</label>
<input type="number" class="form-control" id="age" min="18" required>
<div class="invalid-feedback">You must be at least 18 years old.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">I agree to the terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<script>
// JavaScript for form validation and custom password matching
(function () {
'use strict';
var forms = document.querySelectorAll('.needs-validation');
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
// Prevent form submission if invalid
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
// Custom validation for password match
var password = document.getElementById('password');
var confirmPassword = document.getElementById('confirmPassword');
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity("Passwords do not match");
} else {
confirmPassword.setCustomValidity("");
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output Example
Bootstrap Form Validation Example