The alert drop box if not showing if I skip

The alert box is not showing up when I skip to choose and I’ve no idea why it’s happening. I will include both codes. I am tying to change getElementByName but it didn’t work either. Is there a away to fix? Also, I did some researches and try to fix but still not working and didn’t work as the same.

    <?php  
include("_dbconn.php");

$area = isset($_GET["area"])? $_GET["area"] : "";

// $area = str_replace("1", "Production Floor Access", $area);
// $area = str_replace("2", "Office Floor Access", $area);
// $area = str_replace("3", "Specific Access Doors", $area);

if(substr($area,-1) == "|"){
    $area = substr($area,0,-1);
}
$area_list = explode("|",$area);

// print_r($area_list);
$area_clause = " area_no in ('" . implode("','", $area_list) . "')";

$ary_approver = array(
  "Albert Chin"       => "albert.chin@example.com",
  "Alberto Leotti"    => "alberto.leotti@example.com",
  "Alex Koh"          => "alex.koh@eg.com",
  "Bala Subbu"        => "bala.subbu@eg.com",
  "Bertrand Seow"     => "bertrand.seow@eg.com",
  "Calvin Goh Chin Boon"     => "calvin.goh@eg.com",
  "Chan Boon Hock"           => "boon-hock.chan@eg.com",
  "Cheng Kear Yong"   => "kear-yong.cheng@eg.com"
);


$sql = "Select distinct(approver_name) from access_request.tbl_access_area where ".$area_clause."";
$result = mysqli_query($conn,$sql);
//echo $result;

$cnt = 0;

echo "<table align=\"center\" border=\"0\" width=\"95%\" bordercolor=\"#DADADA\" cellpadding=\"3\" cellspacing=\"1\">\n";
echo  "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\">\n";
    echo  "<font face=\"arial\" size=\"2\" color=\"#3C5F84\">  Approver  </font>";
    echo "       ";
    echo "<tr bgcolor=\"#F5F5F5\"><td align=\"left\" colspan=\"5\" style=\"
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
    grid-gap: 10px;
    margin-left:138px;
    margin-top:-23px;\">";

    while($row = mysqli_fetch_array($result)){
        foreach($ary_approver as $k => $v){


            if($k == $row["approver_name"]){
                echo "<input type=\"checkbox\" id=\"chkApprover" . $cnt . "\" name=\"chkApprover[]\" value=\"$v\"><font face=\"arial\" size=\"2\" color=\"#3C5F84\">". $k . "</font>";
                //echo "<br>           ";
            }
        }
        $cnt++;
    }

    echo  "</td></tr>\n";
    echo  "</td></tr>\n";
    echo "<tr bgcolor=\"#F5F5F5\"></tr>\n";
    echo  "</table>\n";

?>

Below codes are javascript codes.

var alist = '';
var list = document.getElementsByName('chkApprover[]');

for ( i=0; i < list.length; i++ ) {   
  if (document.getElementById('chkApprover' + i).checked == true) {
    alist = alist + list[i].value + '|';
  }
}

if(alist == ""){
  alert("Please choose at least one Approver for your request!");
  return false;
}

>Solution :

Your HTML is VERY wrong. You cannot nest trs.

Please check https://validator.w3.org/

You need an event handler on a form to run your test

document.getElementById("form1").addEventListener("submit", function(e) {
  var alist = '';
  var list = document.getElementsByName('chkApprover[]');

  for (i = 0; i < list.length; i++) {
    if (document.getElementById('chkApprover' + i).checked == true) {
      alist = alist + list[i].value + '|';
    }
  }

  if (alist == "") {
    alert("Please choose at least one Approver for your request!");
    e.preventDefault()
  }
})

<form id="form1">
  <table align="center" border="0" width="95%" bordercolor="#DADADA" cellpadding="3" cellspacing="1">
    <tr bgcolor="#F5F5F5">
      <td align="left" colspan="5">
        <font face="arial" size="2" color="#3C5F84"> Approver </font>
      </td>
    </tr>
    <tr bgcolor="#F5F5F5">
      <td align="left" colspan="5" style="display: grid; grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content; grid-gap: 10px;    margin-left:138px; margin-top:-23px;">
        <input type="checkbox" id="chkApprover0" name="chkApprover[]" value="$v">
        <font face="arial" size="2" color="#3C5F84">Albert Chin </font>

        <input type="checkbox" id="chkApprover1" name="chkApprover[]" value="$v">
        <font face="arial" size="2" color="#3C5F84">Alberto Leotti </font>
      </td>
    </tr>
    <tr bgcolor="#F5F5F5"></tr>
  </table>
  <input type="submit">
</form>