When data is saved in the browser, the bootstrap validation (green tick) does not display, but it works perfectly when the data is entered manually.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags and Bootstrap CSS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b263b26">[source]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional: Adjust form width on larger screens */
.registration-form {
max-width: 500px;
margin: auto;
}
/* Remove autofill background color in Chrome */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important; /* Changes background to white */
-webkit-text-fill-color: #000 !important; /* Ensures text remains black */
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="registration-form">
<div class="card">
<div class="card-body">
<h3 class="card-title text-center mb-4">Register</h3>
<form class="needs-validation" novalidate>
<!-- First Name and Last Name -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" pattern="^[A-Za-z]+$" placeholder="First Name" required>
<div class="invalid-feedback">
Please enter your first name (letters only).
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" pattern="^[A-Za-z]+$" placeholder="Last Name" required>
<div class="invalid-feedback">
Please enter your last name (letters only).
</div>
</div>
</div>
<!-- Email -->
<div class="mb-3">
<label for="emailAddress" class="form-label">Email</label>
<input type="email" class="form-control" id="emailAddress" placeholder="Email" required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" minlength="6" placeholder="Password" required>
<div class="invalid-feedback">
Please enter a password with at least 6 characters.
</div>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" minlength="6" placeholder="Confirm Password" required>
<div class="invalid-feedback">
Passwords do not match.
</div>
</div>
<!-- Terms and Conditions -->
<div class="form-check mb-3">
<input type="checkbox" id="terms" class="form-check-input" required>
<label class="form-check-label" for="terms">I agree to the terms and conditions</label>
<div class="invalid-feedback">
You must agree to the terms and conditions.
</div>
</div>
<!-- Submit Button -->
<div class="d-grid">
<button class="btn btn-primary" type="submit">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and custom validation script -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a677a67">[source]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script>
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Trigger validation for autofilled fields on page load
const triggerAutofillValidation = () => {
const autofillFields = document.querySelectorAll('input:-webkit-autofill');
// Dispatch an input event for each autofilled field to trigger validation
autofillFields.forEach(field => {
field.dispatchEvent(new Event('input', { bubbles: true }));
});
};
// On window load, trigger autofill validation
window.addEventListener('load', triggerAutofillValidation);
// Loop over each form and prevent submission if invalid
Array.from(forms).forEach(form => {
// Password and Confirm Password fields
const password = form.querySelector('#password');
const confirmPassword = form.querySelector('#confirmPassword');
// Event listener to validate password match
confirmPassword.addEventListener('input', function () {
if (confirmPassword.value !== password.value) {
confirmPassword.setCustomValidity('Passwords do not match');
} else {
confirmPassword.setCustomValidity('');
}
});
// Form submission event
form.addEventListener('submit', event => {
// Check for validity
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
// Add Bootstrap validation classes
form.classList.add('was-validated');
}, false);
});
})();
</script>
</body>
</html>
Please refer to the images below for more information:
I am looking to have the green tick displayed even when using browser saved data. What steps should I take to achieve this?