Как использовать селектор запросов, чтобы проверить, заполнены ли ДВА поля ввода?

У меня есть функция следующим образом:

<script type = "text/javascript"> 
function displayquestion(a, ignore) {
    var b = a - 1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");

function showNext() {
        showRequired.style.display = "none";

        for (var i = 0; i < questions.length; i++) {
            questions[i].style.display = "none";
        }

        var nextQuestion = document.getElementById("question" + a);

        if (nextQuestion !== null) {
            nextQuestion.style.display = "inline-block";
        }
    }

    // Check if question should ignore inputs
    if (ignore == 1) { // yes, ignore the inputs so move on to next question
        console.info("path 1");

        showNext();
    } else { //no, don't ignore the inputs
        var input = document.querySelector('input.input' + b);
        if (input.type == "radio") { //this is a radio input                
            if (document.querySelector("#question" + b + " input[type=radio]:checked")) { //a radio option is selected
                console.info("path 2");              

                showNext();
            } else { // no radio option is selected so show error                   
                console.info("path 3");

                showRequired.style.display = "block";
            }
        } else { // not a radio input
            if (input !== null) {
                var currentInput = input.value;
            }

            if (currentInput == '') { // the input is blank so show error
                console.info("path 4");

                showRequired.style.display = "block";
            } else { // the input is not blank so move on to next question
                console.info("path 5");

                showNext();
            }
        }
    }
}
</script>
<div id = "requiredMessage" style = "display:none"><p>This field is required.</p></div>

<form id = "TheForm" style = "display:block;">
    <div class = "questionholder" id = "question1" style = "display:inline-block"> <!-- REQUIRED -->
        <div style = "display:inline-block">
            <h5>Given Name</h5>
            <input class = "input1" name = "gn"><br>    
        </div>
        <div style = "display:inline-block">
            <h5>Last name</h5>
            <input class = "input1" name = "ln"><br>    
        </div>
        <div class = "holdButtons">
            <a class = "text2button" onclick = "displayquestion(2)">Next</a>
        </div>
</div>
<div class = "questionholder" id = "question2" style = "display:none"> <!-- REQUIRED -->
it worked!
</div>
</form>

На что я хочу обратить особое внимание в этом сегменте:

    var input = document.querySelector('input.input' + b);
} else { // not a radio input
        if (input !== null) {
            var currentInput = input.value;
        }

        if (currentInput == '') { // the input is blank so show error
            console.info("path 4");

            showRequired.style.display = "block";
        } else { // the input is not blank so move on to next question
            console.info("path 5");

            showNext();
        }
    }

Суть кода заключается в том, что пользователь должен заполнить ОБА поля ввода. Если ЛЮБОЕ поле ввода пусто, должно появиться сообщение об ошибке.

Однако мой код показывает ошибку только в тех случаях, когда ОБА поля ввода пусты или если пусто только первое поле ввода.

Если первое поле ввода заполнено, а второе пусто, пользователю должно быть показано сообщение об ошибке, но этого не происходит.

Насколько я понимаю, мой код на самом деле не проверяет оба поля ввода, а только проверяет, является ли какой-либо ввод пустым, но я не понимаю, как я могу исправить свой код, чтобы перебирать оба поля ввода, чтобы проверить, что они оба заполнены.

Пожалуйста, без jQuery. Спасибо.

https://jsfiddle.net/vj9mk1bq/1/