JSFiddle - React, Tailwind, and code Playground

HTML

<form name="SimpleForm" onsubmit="return validateForm()">
    <input type="text" name="firstname" id="firstname" />
    <input type="text" name="lastname" id="lastname" /><br/>
    
     <!--two checkboxes added-->
    <input type="checkbox" name="gender" value="Male"> Male <br/>
    <input type="checkbox" name="gender" value="Female"> Female <br/>
    
    <!--dropdown added-->
    <select name="YourAge">
     <option value="">Select your age range:</option>
     <option value="0-18 years">0-18 years</option>
     <option value="18-25 years">18-25 years</option>
     <option value="26-45 years">26-45 years</option>
     <option value="46-60 years">46-60 years</option>
     <option value="60+ years">60+ years</option>
    </select>
    
    <input type="submit" value="Submit">
</form>

JavaScript

function validateForm()
{
 // get value using Id
   var firtsname =document.getElementById("firstname").value;
   var lastname =document.getElementById("lastname").value;
   
   if(!firtsname )
   {
     alert("Enter First name");
     // return false will not allow to submit form to server
      return false;
   }
   else if (!lastname)
   {
       alert("Enter last name");
       return false;
   }
     
   //checkbox validation starts here
    if(document.SimpleForm.gender[0].checked==false && document.SimpleForm.gender[1].checked==false)
    {
        alert('Select your gender');
        return false;
    }
    
     // dropdown validation
    if (document.SimpleForm.YourAge.selectedIndex == 0)
    {
         alert("Please select your age range.");
         return false;
    }
    
}