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