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

我的职能如下：

<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>

代码的要点是要求用户填写两个输入字段。如果任一输入字段为空，则应显示错误消息

但是，我的代码仅在两个输入字段都为空或只有第一个输入字段为空的情况下显示错误

如果第一个输入字段已填写，但第二个字段为空，则应向用户显示错误消息，但这不会发生

据我所知，我的代码实际上并没有检查两个输入字段，而是只检查其中一个输入是否为空，但我不清楚如何更正代码以迭代两个输入字段以检查它们是否都已填充

请不要用jQuery。多谢各位

querySelector仅查找第一个匹配元素

对于多个输入，您可以执行以下操作

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

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

---

基本上使用返回一个布尔值，基于每个元素都有一个值。您可以根据需要调整返回以进行更精细的验证

这两个输入是否都有类输入+b？是的，它们有：我真的不清楚如何将其集成到我的代码中。选择器是什么：我的var输入？然后我如何检查是否有效？如下所示：if isValid=={display error else{execute code}？isValid是一个由every返回的布尔值…ifisValid也是一个简单的布尔值。至于选择器，它是您的选择器字符串，如“input.input”+b。想想querySelector的概念实际上意味着什么…在domI中查询css选择器，他们会在视觉媒体中教授这些内容。当它出现时，每个人都会忽略javascript的这一部分教它，我不知道为什么…我会试一试。对不起，我不能真正联系起来…我是100%自学的

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

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