I have been attempting to update my code to use ES6 syntax and I'm perplexed as to why my form's radio buttons and checked checkboxes are not registering as true when selected. Even if a user picks one of the options, I still receive an error message. Could you kindly assist me in identifying what I am doing wrong so I can improve my understanding?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validate me</title>
<script type="text/javascript">
validateAll =()=> {
var formdata = document.forms[0].elements;
var numelems = formdata.length;
var checkboxelem = false;
var radioelem = false;
var msg = '';
var radmsg = '';
var checkmsg = '';
var textmsg = '';
var checker = true;
for (let i = 0;i<numelems;i++){
if (formdata[i].type == 'text' && formdata[i].value === ''){
msg += "<br>please enter your " + formdata[i].name;
checker = false;
}
if (formdata[i].type == 'radio'){
radname = formdata[i].name;
const numelems = document.getElementsByName(radname).length;
for (let rad=0;rad<numelems; rad++) {
if (radname[rad].checked === true){
radioelem = true;
}
}
if (radioelem === false){
radmsg = "<br>please select a " + radname;
checker = false;
}
}
if (formdata[i].type == 'checkbox'){
grpname = formdata[i].name;
const numelems = document.getElementsByName(grpname).length;
for (let chk=0;chk<numelems; chk++) {
if (grpname[chk].checked === true){
checkboxelem = true;
}
}
if (checkboxelem === false){
checkmsg = "<br>please check a " + grpname;
checker = false;
}
}
if (formdata[i].type == 'select-one' && formdata[i].value === ''){
msg += "<br>please select your " + formdata[i].name;
checker = false;
}
if (formdata[i].type == 'textarea' && formdata[i].value === ''){
textmsg += "<br>please enter your " + formdata[i].name;
checker = false;
}
}
document.getElementById('err').innerHTML = msg + radmsg + checkmsg + textmsg;
return checker;
}
</script>
</head>
<body>
At least one input is required from each input type.<br><br>
<span id = "err"></span>
<form action = "dynamic.html" method = "post" onsubmit="return validateAll();" ><br/>
Name:<input type = "text" name = "fullname" placeholder="Enter Full Name"/><br/>
Gender:<br>
Male<input type = "radio" name = "gender" value="male"/>Female<input type = "radio" name = "gender" value="female"/><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>