Форма начальной загрузки не показывает проверку при использовании сохраненных данных браузера ⇐ CSS

[Anonymous]

В приведенном ниже коде проверка начальной загрузки (зеленая галочка) не отображается, когда данные сохраняются в браузере, но работает нормально, когда данные вводятся вручную.

Код: Выделить всё

Registration Form



/* 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 */
}







Register




First Name


Please enter your first name (letters only).



Last Name


Please enter your last name (letters only).





Email


Please enter a valid email address.




Password


Please enter a password with at least 6 characters.




Confirm Password


Passwords do not match.





I agree to the terms and conditions

You must agree to the terms and conditions.




Register










(() => {
'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);

});
})();

Для справки см. изображения ниже:
При вводе данных вручную
При использовании данных, сохраненных в браузере
При использовании данных, сохраненных в браузере
p>
Я также хочу поставить галочку, когда также используются сохраненные данные браузера. Итак, как я могу это сделать?

Подробнее здесь: https://stackoverflow.com/questions/790 ... saved-data