Валидация формы содержащую input и select на JS

Помогите валидировать форму, состоящую из input и select, чтобы стиль кнопки формы менялся только если выбраны все select и введены цифры в поле input.

Моих знаний пока хватает, чтобы только написать отдельно валидаюцию для input и для select.

На странице есть 3 таба с одинаковыми формами, валидация есть частично через required (код прикрепляю по одной их форм)

<form action="" name="form">
    <div class="pay-title">
        <h2>Перевод</h2>
        <div class="pay-form-cover">
            <img class="pay-form-img" src="" alt="">
        </div>
    </div>
    <div class="pay-form-item">
        <select class="form_select" name="contract" style="color:gray" onchange="this.style.color='black'" required>
            <option value="" style="display:none">Выбрать</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
        </select>
    </div>
    <div class="pay-form-item">
        <select class="form_select" name="portfel" style="color:gray" onchange="this.style.color='black'" required>
            <option value="" style="display:none">Выбрать</option>
            <option value="">1</option>
            <option value="">2</option>
        </select>
    </div>
    <div class="pay-form-value">
        <input class="pay-form-input" type="number" placeholder="Ввести" required>
        <button type="submit" class="pay-form-btn">Показать</button>
    </div>
</form>

И JS-код, с моими жалкими попытками слепить из запросов гугла свою валидацию:

let portfel = document.getElementsByName('portfel'),
    contract = document.getElementsByName('contract'),
    button = document.querySelectorAll('.pay-form-btn'),
    textField = document.querySelectorAll('.pay-form-input');
 

function CheckForm() {

    contract.forEach((sel) => {
        sel.addEventListener('change', function (){
            let contractNum = sel.selectedIndex;
            if (contractNum > 0) {
                button[2].style.backgroundColor = 'rgb(56, 120, 70)'
            }
        });
      })

    let portfelNum = 0;
    portfel.forEach((sel) => {
        sel.addEventListener('change', function (){
            portfelNum = sel.selectedIndex;
            if (portfelNum > 0) {
                button[2].style.backgroundColor = 'rgb(56, 120, 70)'
            }
        });
      })
      


    for (let i = 0; i < button.length; i++) {
        for (let i = 0; i < textField.length; i++) {
            textField[i].addEventListener('keyup', function () {
                if (textField[i].value > 0) {
                    button[i].style.backgroundColor = 'rgb(56, 120, 70)'
                } else {
                    button[i].style.backgroundColor = 'rgb(56, 120, 70, 0.5)'
                }
            }   );
        }
    }
    
}

Напомню, что на странице 3 одинаковых формы, с разными данными, которые нужно перебирать. Логика должна быть такая: Я выбираю первый select, потом второй select, потом набираю число и кнопка формы меняет цвет. Если хоть одно условие не выполняется, то кнопка имеет класс по умолчанию.

Буду благодарен, если вы направите меня в нужном направлении для решения этой задачи!