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/>
    
    <input type="checkbox" name="gender" value="Male"> Male <br/>
    <input type="checkbox" name="gender" value="Female"> Female
    <br/>
    <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;
    }
}