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

Question

页面的所有输入

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

如果一个输入类型 number,text,date 的值为 != "" 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" 将不再工作。 我得到了价值 null。 所以，如果我带着这个：

       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按钮时，它会执行您想要的验证，在本例中!= "" 。