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

问题描述 投票:0回答:0

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

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

您的用户只有 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 forms loops validation dom
© www.soinside.com 2019 - 2024. All rights reserved.