我正在尝试仅使用 javascript 来验证附加的 html，以便所有输入都至少输入、选中或选择了某些内容-解网

问：

我让我的验证正常工作，并遍历了其中的大部分以确保它被选中。但是，它会跳过“爱好”复选框，并且不检查它是否被选中，而会检查其他所有内容并发送警报。下面列出了说明，并附上了我的代码。

只使用 DOM，只使用 javascript 验证附加的 html，以便在所有输入中至少输入、检查或选择某些内容。这意味着没有 html5 表单验证的“必需”属性。尝试遍历窗体中的所有元素并评估它们的类型，然后再测试是否存在值，或者单选按钮或复选框是否具有“true”的 checked 属性

您的用户只有 Internet Explorer 8，这意味着您不能使用 html5 的必需属性！



<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Validate me</title>
<script>
    function validateMe(){
        for (let i=0; i < document.forms[0].elements.length; i++) {
            let msg = document.forms[0].elements[i].name;
            if(document.forms[0].elements[i].value == "") {
                alert("Please enter your " + msg);
                document.forms[0].elements[i].focus();
                return false;
            }
            var radioGrp = false;
            if(document.forms[0].elements[i].type == "radio"){
                let msg = document.forms[0].elements[i].name;
                const numelems = document.getElementsByName(msg).length;
                let elem = document.getElementsByName(msg)

                for(var j = 0; j < numelems; j++) {
                    if (elem[j].checked == true) {
                        radioGrp = true;

        }
    }
                if(radioGrp == false) {
                    alert("Please enter your " + msg);
                    return false;
                }
                var checkboxGrp = false;
            if(document.forms[0].elements[i].type == "checkbox"){
                let msg = document.forms[0].elements[i].name;
                const numelems = document.getElementsByName(msg).length;
                let elem = document.getElementsByClassName(msg)

                for (var j = 0; j < numelems; j++){
                    if (elem[j].checked == true){
                        checkboxGrp = true; 

                }
                    }
            if (checkboxGrp == false){
                alert("Please select your "+ msg);
                return false; 
            }
                }
            }
        }
    }
</script>
</head>
<body>
At least one piece of data has to come in from every input type.
<form action="form.html" method="get" onsubmit="return validateMe();"><br>
Name:<input type="text" id="test" name="fullname" placeholder="Enter Full Name"><br>
Year in College:<br>
First Year<input type="radio" name="year" value="First Year">
Second Year<input type="radio" name="year" value="Second Year">
Third Year<input type="radio" name="year" value="Third Year"><br>

Hobbies<br>
Baseball <input type="checkbox" name="hobbies[]" value="baseball">  
Football <input type="checkbox" name="hobbies[]" value="football">  
Hockey <input type="checkbox" name="hobbies[]" value="hockey"><br>
Favorite Show <select name="show">
<option value="">Choose Below</option>
<option value="ATHF">Aqua Teen Hunger Force</option>
<option value="Family Guy">Family Guy</option>
<option value="Simpsons">Simpsons</option>
</select><br>
Comments<br>
<textarea cols="50" rows="6" name="comments"></textarea><br>
<input type="submit" name="submit" value="enter me">
</form>
</body>
</html>

JavaScript 表单循环验证 DOM

我正在尝试仅使用 javascript 来验证附加的 html，以便所有输入都至少输入、选中或选择了某些内容

I am trying to validate the attached html using nothing but javascript so that at all inputs have at least something entered, checked or selected

评论