<!doctype html>
<head>
            <title>Validate me</title>
            </head>
            <body>
            At least one piece of data has to come in from every input type.
                <form action="hw5.html"  method="get" onsubmit="return validateMe();"><br>
                    
                    <div>
                        Name:
                        <input type="text" id = "name" name="fullname" placeholder = "Enter Full Name"><br>
                        <span id="fullname_error"></span><br>
                    </div>
                    
                    <div>
                        Gender:<br>
                            Male
                            <input type="radio" name="gender" value="male">
                            Female
                            <input type="radio" name="gender" value="female"><br>
                            <span id="gender_error"></span><br>
                    </div>
                    
                    <div>
                        Hobbies<br>
                            Baseball <input type="checkbox" title="hobby" name="hobbies[]" value="baseball">  
                            Football <input type="checkbox" title="hobby" name="hobbies[]" value="football">  
                            Hockey <input type="checkbox" title="hobby" name="hobbies[]" value="hockey"><br>
                            <span id="hobbies[]_error"></span><br>
                    </div>
                
                    <div>
                        Favorite Show <br><select id="show" 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>
                        <span id="show_error"></span><br>
                    </div>

                    <div>
                        Comments<br>
                        <textarea rows="6" cols="50" name="comments"  id="comments" placeholder="Enter comments" tabindex="4" value=''></textarea> 
                        <span id="comments_error"></span>  
                    </div>

                        <input type="submit" name="submit" value="Enter">
            </form>
                
                
                
            <script>
                
            function validateMe(){
                var radioGrp = false;
                var chkbxGrp = false;

                for (var i=0;i<document.forms[0].elements.length;i++){
                    if (document.forms[0].elements[i].type != 'submit'){
                      var errorarea = document.forms[0].elements[i].name + "_error";
                        if (document.forms[0].elements[i].type == 'text')
                            if (document.forms[0].elements[i].value == ''){
                                var msg = document.forms[0].elements[i].name;
                                var t = document.createTextNode("Please enter your " + msg);
                                 document.forms[0].elements[i].nextElementSibling.nextElementSibling.appendChild(t); 
                           document.forms[0].elements[i].nextElementSibling.nextElementSibling.style.color = '#ff0000'; 
                                document.forms[0].elements[i].focus();
                            }
                            else 
                             {
                                document.getElementById(errorarea).innerHTML= '';      
                            }
                        


                        if (document.forms[0].elements[i].type == 'radio'){
                             msg = document.forms[0].elements[i].name;
                             numelems = document.getElementsByName(msg).length;
                             var elem = document.getElementsByName(msg)

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

                            if (radioGrp == false){
                                document.getElementById(errorarea).innerHTML= 'Please select your ' + msg;
                                document.getElementById(errorarea).style.color = '#ff0000'; 
                                document.forms[0].elements[i].focus();
                            }
                            else 
                            {
                                document.getElementById(errorarea).innerHTML= '';  
                            }
                        }



                        if (document.forms[0].elements[i].type == 'checkbox'){
                            msgchk = document.forms[0].elements[i].title;
                            chkname = document.forms[0].elements[i].name;

                            var chkelem = document.getElementsByName(chkname);

                           for (var k = 0; k < document.getElementsByName(chkname).length; k++) {
                         if (chkelem[k].checked) {
                             chkbxGrp = true;
                              }
                        }

                            if (chkbxGrp == false){
                                document.getElementById(errorarea).innerHTML= 'Please select your ' + msgchk;
                                document.getElementById(errorarea).style.color = '#ff0000'; 
                                document.forms[0].elements[i].focus();
                            }
                            else 
                            {
                                document.getElementById(errorarea).innerHTML= '';  
                            }
                            }
                            


                        if (document.forms[0].elements[i].type == 'select-one'){
                            if (document.forms[0].elements[i].value == ''){
                                msg = document.forms[0].elements[i].name;
                                document.getElementById(errorarea).innerHTML= 'Please select your ' + msg;
                                document.getElementById(errorarea).style.color = '#ff0000'; 
                                document.forms[0].elements[i].focus();
                            }
                            else 
                            {
                                document.getElementById(errorarea).innerHTML= '';      
                            }
                            }
                        
                        if (document.forms[0].elements[i].type == 'textarea'){
                            if (document.forms[0].elements[i].value == ''){
                                msg = document.forms[0].elements[i].name;
                                document.getElementById(errorarea).innerHTML= 'Please enter any ' + msg;
                                document.getElementById(errorarea).style.color = '#ff0000'; 
                                document.forms[0].elements[i].focus();
                            }
                            else 
                            {
                                document.getElementById(errorarea).innerHTML= '';  
                            }
                            }               
                                             
               }
            }return false;
            }      
            </script>











            </body>
            </html>