I realize this question might seem like a duplicate, but I have read all relevant answers and haven’t found a solution that works for my specific case.
My scenario is similar to the one described in this question, with some differences. The issue only occurs on the remote server, which makes testing doubly difficult. The code works fine except when the browser auto-fills the credentials without any user intervention. On page load, the login button is greyed out, even though the credentials are prefilled. A simple click anywhere enables the button, but that shouldn’t be necessary. I’ve tried the solutions from the original question and its comments, but none worked. I also found an answer to this question, but it isn’t suitable since it prevents the browser from binding the saved credentials altogether.
What I can do:
- Programmatically prevent the browser from autofilling fields when the page first loads (Autofilling occurs without user interaction, while autocompletion happens after the user starts typing/clicks inside the field).
- Run validation immediately after the browser autofills credentials, so the button is enabled.
What I cannot do:
- Prevent autocompletion or the browser from saving credentials altogether (users should still be able to click inside a field and select from saved credentials in the dropdown).
- Skip validation on the first load, as this would leave the button active if the browser doesn’t autofill.
My code:
function validateForm() {
var username = document.getElementById('Username').value;
var password = document.getElementById('Password').value;
var submitButton = document.getElementById('ActionSubmit');
if (username && password) {
submitButton.disabled = false;
submitButton.style.backgroundColor = '#34495e';
submitButton.style.color = '#ffffff';
submitButton.style.cursor = 'pointer';
}
else {
submitButton.disabled = true;
submitButton.style.backgroundColor = '#ccc';
submitButton.style.color = '#ffffff';
submitButton.style.cursor = 'not-allowed';
}
}
document.getElementById('Username').addEventListener('input', validateForm);
document.getElementById('Password').addEventListener('input', validateForm);
window.addEventListener('load', function () {
validateForm();
});
Any help would be greatly appreciated!