Javascript ES6 Syntax Radio button check

I have been trying to convert my code using the ES6 syntax and wondering why are my form’s radio and checked buttons not registering as true when check. I still get the error message even if a user selects one of the choices? Could you please help me with what I’m doing wrong so I can better understand.

<!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 lease one piece of data has to come in from every 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>

Answer

Cycle is going though the string property, not that consist the DOM elements:

const numelems = document.getElementsByName(radname).length;
for (let rad=0;rad<numelems; rad++) {
 if (radname[rad].checked === true){
  radioelem = true;
 }
}

At least it should be:

const radioInputs = document.getElementsByName(radname);
const numelems = radioInputs.length
for (let rad=0;rad<numelems; rad++) {
 if (radioInputs[rad].checked === true){
  radioelem = true;
 }
}

Advertisement

Answer