如何驗證頁面上存在的所有輸入？

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按鈕時，它會執行您想要的驗證，在本例中!= "" 。