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

Question

All inputs from page

I have this html page which is dynamical created, which contains some divs. Every div-question(0,1,2, etc) contain an input based on which answer type the user chose. I want to validate every single inputs from page and:

If value of one input type number,text,date is != "" alert("something")
else send the value in an array;
If checkbox/radio is not checked alert("something");

I tried something like this:

        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);
                }
            }
        }

It's working but if I come with another for loop, for input type="number" is not working anymore. I'm getting value null. So if I come with this:

       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);
                }
            }
        }

And for the checkbox and radio inputs I don't have any idea. I want something like this:

If all inputs are not empty and minimum one checkbox/radio is checked, send the answer and question in an array else alert("error");

Answer 1

I feel like this is simple once you add the required attribute and/or a pattern .

This is a simple 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>

Notice that when you click the submit button, it does the verification you want, in this case != "" .