如何验证页面上存在的所有输入？

Question

All inputs from page

我有这个动态创建的 html 页面，其中包含一些 div。每个 div-question(0,1,2, etc) 都包含一个基于用户选择的答案类型的输入。我想验证页面中的每一个输入，并且：

如果一个输入类型 number,text,date 的值为 != "" alert("something")
否则发送数组中的值；
如果复选框/收音机没有选中 alert("something");

我尝试过这样的事情：

        let nrDiv = document.getElementsByClassName("div-question");
        let existInput = nrDiv[0].querySelector("input[type='text']");
        let numberInput = nrDiv[0].querySelector("input[type='number']");
        if (document.body.contains(existInput)) {
            for (let i=0; i < nrDiv.length ;i++) {
                let container = document.getElementsByClassName("div-questions" + i + "");
                let userInputAnswer = container[0].querySelector("input[type='text']");
                if (userInputAnswer.value == "") {
                    alert("Adaugati un raspuns!")
                    return;
                } 
                 if (userInputAnswer.value != ""){
                    let answer = {
                        question: questions[i].textQuestion,
                        answer: userInputAnswer.value
                    }
                    answers.push(answer);
                }
            }
        }

它正在工作，但如果我使用另一个 for 循环，for input type="number" 将不再工作。我得到的价值为空。所以如果我带着这个来：

       if (document.body.contains(numberInput)) {
            for (let i=0; i < nrDiv.length ;i++) {
                let container = document.getElementsByClassName("div-questions" + i + "");
                let userInputAnswer = container.querySelector("input[type='number']");
                if (userInputAnswer.value == "") {
                    alert("Adaugati un raspuns!")
                    return;
                } 
                 if (userInputAnswer.value != ""){
                    let answer = {
                        question: questions[i].textQuestion,
                        answer: userInputAnswer.value
                    }
                    answers.push(answer);
                }
            }
        }

对于复选框和无线电输入，我不知道。我想要这样的东西：

如果所有输入都不为空并且至少选中一个复选框/单选框，则将答案和问题发送到数组中 else alert("error");

Answer 1

添加required 属性和/或pattern 后，我觉得这很简单。

这是一个简单的 POC：

<form action="">
  <input type="text" required>
  <input type="number" required>
  <input type="checkbox" required>
  <input type="radio" required>
  <input type="date" required>
  <button type="submit">Submit</button>
</form>

请注意，当您单击 submit 按钮时，它会执行您想要的验证，在本例中为 != ""。