How to validate radio buttons and drop down menu using JavaScript?

Question

all my other validations work except the radio n selected.. i dont know how to do the radio using document instead of alert.

i need the radio and the drop menu to show a message (inside a span tag) when nothing has been selected and I need the message to disapper or removed when something gets selected.

<script>

window.addEventListener("load", loadEventListeners);

    function loadEventListeners() {
        document.getElementById("pickBtn").addEventListener("click", checkForm);
        
        document.getElementById("nameTb").addEventListener("change", removeErrorText);
        document.getElementById("numTb").addEventListener("change", removeErrorText);
        document.getElementById("verbTb").addEventListener("change", removeErrorText);
        
        document.getElementById("numBtwn").addEventListener("change", removeErrorText);
        document.getElementById("nameBe").addEventListener("change", removeErrorText);
        document.getElementById("list").addEventListener("click", removeErrorText);
        
    }//end of loadEventListeners function
    
    var someName;
    var someNum;
    var endVerb;
    var radioPick;
    var numbrBtwn;
    var lettrB;
    var selList;
       
    var mistakes;
    
    function removeErrorText() {
        document.getElementById(this.id + "Error").innerHTML = "";
        
    }//end of removeError
    
    function checkForm() {
        
        mistakes = false;
        
        //*****Name TB***** 
        
       someName = document.getElementById("nameTb").value;
       var letters =  /^[A-Za-z]+$/;
           
        if(someName=="" || !letters.test(someName)) {
            document.getElementById("nameTbError").innerHTML = "You need to enter your first name";
            mistakes = true;
    
        }   
        
        //***Number TB***
        someNum = document.getElementById("numTb").value;
        
        if(someNum=="" || isNaN(someNum)){
            document.getElementById("numTbError").innerHTML = "You need to enter a numeric value";
            
             mistakes = true;
        }
        //***Verb end w/ INg***
        
        endVerb = document.getElementById("verbTb").value;
        var ing = /^[A-Za-z]+(ing)$/i;

        if(endVerb=="" || !ing.test(endVerb)) {
            document.getElementById("verbTbError").innerHTML = "You need to enter a verb ending in ing";
            
             mistakes = true;
    }
        //***Choose RadioButton** 

//this is where i need help with. I cant use the id I need to use the name so does that mean i have to put it in evenlistener as document.getElementByName("rb").addEventListener.("click", removeErrorText)

        //**Between TB**
        numbrBtwn = document.getElementById("numBtwn").value;
        
        if(numbrBtwn=="" || isNaN(numbrBtwn) || numbrBtwn < 7 || numbrBtwn > 14){
            document.getElementById("numBtwnError").innerHTML = "You need to enter a number between 7 and 14";
            
            mistakes = true;
        }
        
               
        //** Start letter Name**
        lettrB = document.getElementById("nameBe").value;
        var b = /^[Bb]/;
        
        if(lettrB=="" || !b.test(lettrB)){
            document.getElementById("nameBeError").innerHTML = "You need to enter a name with the letter B";
            mistakes = true;
        }
        
        
        //**Select**
      if(document.myForm.list.selectedIndex<=0) {
            //alert("you need to select a menu item!!");
            document.getElementById("listError").innerHTML = "check";
            mistakes=true;
        }
        else {
            selList = document.myForm.list.value;
        }
        
       }//end of checkform
     
    
<div class="container">
    <form class="myForm" id="myForm">
    <div class="form-control">
     <label id="fName">Enter your first name: </label><span id="nameTbError" class="errorText"></span>
     <br>
     <input type="text" id="nameTb"><br><br>
        
     <label id="numBr">Enter a number: </label><span id="numTbError" class="errorText"></span>
     <br>      
      <input type="text" id="numTb"/><br><br>
      <label>Enter a verb ending in "ing": </label><span id="verbTbError" class="errorText"></span>
                <br>
       <input type="text" id="verbTb"/><br>
       <br>
       <label>Choose one: </label><span id="rbError" class="errorText"></span>
        <br>
        <input type="radio" id="pick1" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #1</span>
        <br>
        <input type="radio" id="pick2" name="rb" class="rb" value="">
        <span id="pick" >Choose what's behind door #2</span>
        <br>
        <input type="radio" id="pick3" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #3</span>
        <br>
        <input type="radio" id="pick4" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #4</span>
        <br>
        <input type="radio" id="pick5" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #5</span>
                   <br><br>
         <label>Enter a number between 7 - 14: </label><span id="numBtwnError" class="errorText"></span><br>
         <input type="text" id="numBtwn"/><br><br>
         <label>Enter a name starting with the letter B: </label><span id="nameBeError" class="errorText"></span><br>
         <input type="text" id="nameBe"/><br><br>

          <label>Select an appropriate option based on the answer above: </label><span id="listError" class="errorText"></span><br>
          <select id="list">
                <option value="Select">Select One</option>
                <option value="Female">Female</option>
                <option value="Male">Male</option>
                <option value="Neither">Neither</option>
         </select><br><br>
                <input type="button" id="pickBtn" value="See What You've Won!!">
                
        </div>
     </form>  
 </div>

Answer 1

So first of all, you want an onsubmit action on your form. Something like:

<form class="myForm" id="myForm" onsubmit="return validateForm()">

Then in your validateForm() function, in your script, you get all of the radiobuttons by name (which is an collection)

function validateForm() {
    var radios = document.getElementsByName("rb");
    var validationBoolForm = false;
    var i = 0;

    while (!validationBoolForm && i < radios.length) {


        if (radios[i].checked) {
            validationBoolForm = true;
        }
        i++
    }

    if (!validationBoolForm) {
        alert("Please select an option!")
    }
    return validationBoolForm;
}

As for your select, you want to have something along these lines:

HTML:

<select id="list" name="genders">

JS:

function validate()
{
 var selectOptions = document.getElementById("list"); //might want to change that to be a bit more specific, the id of the select
 var selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
    if (selectedValue == "Select")
   {
    alert("Please select something");
   }
}

So this function checks if your selected value is equal to the first one, in which case it prompts a message. If not it continues.

edit: Rebased my answer on his new information. Hope you are helped with this information.

Answer 2

  for(var i = 0; i < document.myForm.rb.length; i++) {
        if(document.myForm.rb[i].checked) {
            radioPick = document.myForm.rb.value;
        }
        else {
            document.getElementById("rbError").innerHTML = "You must pick a door";
            
            mistakes = true;
        }
        
    }