如何使用queryselector验证是否填写了两个输入字段？

Question

I have a function as follows:

<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.log("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.log("path 2");              

                showNext();
            } else { // no radio option is selected so show error                   
                console.log("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.log("path 4");

                showRequired.style.display = "block";
            } else { // the input is not blank so move on to next question
                console.log("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>

Where I want to bring particular focus on this segment:

    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.log("path 4");

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

            showNext();
        }
    }

The gist of the code is that the user should be required to fill in BOTH inputs fields. If EITHER input field is blank, the error message should appear.

However, my code only shows the error in cases where BOTh input fields are blank or if only the first input field is blank.

If the first input field filled in but the second is blank, the user should be shown the error message - but this isn't happening.

From what i understand, my code isn't actually checking both input fields, but instead is only checking if either input is blank but I'm not clear on how I can correct my code to iterate over both input fields to check that they are both filled in.

No jQuery please. Thank you.

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

Answer 1

querySelector() only finds first matching element

For multiple inputs you could do something like

var inputsArray = Array.from(document.querySelectorAll(selector));

var isValid = inputsArray.every(function(el){
   return el.value; // empty string is falsy
});

Basically using Array#every() to return a boolean based on each element having a value. You can adjust the return for more granular validation as needed