We need to check if all the other inputs are also valid before assuming that we can just enable it let currForm1 = document.getElementById('myForm1'); // Validate on input: currForm1.querySelectorAll('.form-control').forEach(input => { input.addEventListener(('input'), () => { if (input.checkValidity()) { /* IF IT PASSES WE NEED TO CHECK THE OTHER INPUTS */ /* STORE ALL THE INPUTS THAT PASS THE CHECKVALIDITY */ let allValid = currForm1.querySelectorAll('.form-control').filter(input => { return input.checkValidity() }) /* WE CAN NOW UPDATE THE SUBMIT BASED ON THE NUMBER OF VALID INPUTS WE HAVE */ $("#submitBtn").attr("disabled", allValid.length === currForm1.querySelectorAll('.form-control').length); input.classList.remove('is-invalid') input.classList.add('is-valid'); } else { /* IF IT FAILS WE DONT NEED TO CHECK WE WANT THE VALIDATOR AS FALSE */ $("#submitBtn").attr("disabled", true); input.classList.remove('is-valid') input.classList.add('is-invalid'); } }); }); /* FINALLY WE CAN UPDATE THE SUBMIT, BASED ON OUR VARIABLE */ $("#submitBtn").attr("disabled", validatorForSubmit );