Enable login button as soon as user fills both fields in Javascipt

Question

I need to enable the submit button as soon as all input fields has value enterred. I have two input fields type text and type password and a button which is disabled (I set its class as "disabled" than use CSS to change color etc..), I would like to remove that class whenever the above condition is met. I added 'change' and 'input' event listeners to all field like below:

const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('continuebtn');
const signinForm = document.querySelector('#sign-in-form');

inputs.forEach((input) => {

input.addEventListener('input', function(e){
if (input.value !== '') {
  continueBtn.classList.remove('disabled');
}else{
  continueBtn.classList.add('disabled');
   }
}
});

Tried with e.target.value.trim() === '' as well

I guess the above would be applied to all inputs and check if they're empty when the user is typing, but I'm not able to make it work: the button is being activated no matter what I do.

I would need some help in plain Javascript as this is what I'm currently learning. no jQuery. Thanks

Answer 1

Use the every() method to check all the inputs, not just the one that the user is currently editing.

const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('#continuebtn');
const signinForm = document.querySelector('#sign-in-form');

inputs.forEach((input) => {
  input.addEventListener('input', function(e) {
    if (inputs.every(input => input.value.trim())) {
      continueBtn.classList.remove('disabled');
    } else {
      continueBtn.classList.add('disabled');
    }
  });
});

#continuebtn.disabled {
  background-color: grey;
}

<input type="text">
<input type="password">
<button id="continuebtn" class="disabled">Continue</button>