Walidacja inputów

Siema, mam kilka inputów w formularzu oraz checkboxa, chciałbym ustawić atrybut disabled buttona, który submituje forma na false tylko gdy wszystkie inputy przeszły swoją walidację.

surnameInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[a-zA-z]+$/);
    if(regex.test(surnameInput.value) && surnameInput.value.length >= 2) {
        surnameInput.classList.remove('invalid')
    } else {
        surnameInput.classList.add('invalid')
  }
})

emailInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[^@]+@[^\.]+\..+$/);
    if(regex.test(emailInput.value) && emailInput.value.length >= 2) {
        emailInput.classList.remove('invalid')
    } else {
        emailInput.classList.add('invalid')
  }
})

Jednak trochę utknąłem na tym jak odblokować button, gdy wszystkie inputy już przeszły swoją walidację, a jak go dalej blokować gdy nie. Ktoś miałby pomysł jak to zrobić?

To zadanie sprowadza się do zawołania jakiejś jednej wspólnej funkcji, która sprawdzi, czy wszystkie inputy mają poprawne wejścia, i ustawi atrybut disabled na buttonie.

Zakładając że konsekwentnie będziesz ustawiał klasę invalid na niepoprawnych wejściach, najprościej możesz to zrobić tak:

surnameInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[a-zA-z]+$/);
    if (regex.test(surnameInput.value) && surnameInput.value.length >= 2) {
        surnameInput.classList.remove('invalid')
    } else {
        surnameInput.classList.add('invalid')
    }

    validateForm();
});

emailInput.addEventListener('keyup', () => {
    const regex = new RegExp(/^[^@]+@[^\.]+\..+$/);
    if (regex.test(emailInput.value) && emailInput.value.length >= 2) {
        emailInput.classList.remove('invalid')
    } else {
        emailInput.classList.add('invalid')
    }

    validateForm();
});


function validateForm() {
    var submitButton = document.getElementById('submit-btn');
    var invalidInputs = document.querySelectorAll(".invalid");

    submitButton.disabled = invalidInputs.length > 0;
}

Pamiętaj że do prostych walidacji (np. regexem jak w tym przypadku) możesz użyć wbudowanych mechanizmów HTML5, które w dodatku same ustawią pseudoklasę :invalid na elementach, które nie przeszły walidacji.