Вопрос такой. Делаю свою квиз форму, столкнулся с проблемой, что не могу написать и придумать логику валидации для кнопки. Смысл такой: есть 3 вопроса, на каждый можно ответить да или нет (радиокнопка) либо ввести текст. Так или иначе, значение хотя бы одного инпута в каждом блоке вопросе не должно равняться пустой строке. Прошу помощи.
<form action="" method="post" class="quiz_form">
<div class="modal_item-body">
<div class="quiz_blockWr">
<div class="quiz_block active">
<label for="data1">
<input type="text" placeholder="вопрос 1" id="data1" class="input_frm">
</label>
</div>
<div class="quiz_block">
<label for="data2">
<input type="text" placeholder="вопрос 2" id="data2" class="input_frm">
</label>
</div>
<div class="quiz_block">
<label for="data3">
<input type="text" placeholder="вопрос 3" id="data3" class="input_frm">
<button type="submit" class="btn form_btn" id="form_btn">Отправить</button>
</label>
</div>
</div>
</div>
<div class="modal_item-footer">
<div class="quiz_blockControl">
<button type="button" class="btn btnPrev">Prev</button>
<button type="button" class="btn btnNext">Next</button>
</div>
</div>
</form>
Т.е. когда открывается форма и оказываемся на вопросе 1/3 - то кнопка по умолчанию должна быть неактивной (с классом "inactive" и например стилем user-select: none;), как только начинаем писать в инпут что-то - кнопка загорается и ее можно нажать и перейти на блок 2. При переходе на 2й блок она снова гаснет пока не ответишь на 2й вопрос и тд..
