Validate radio button a multistep form using Javascript

I want to validate a multipage form using Js. Here is what I want the code to be, when I click 'next' i want it to validate whether the radio button has been checked or not. If not then display an alert popup. The multipage form already works but the problem here is I cannot validate the radio button on each page.

Hope anyone can help me solve this problem since I have been few days trying to solve this problem but I don't know how to do it. Thank you in advance.

HTML

<form class="form" action="" method="post">
  <!-- Progress bar -->
  <div class="progressbar">
    <div class="progress" id="progress"></div>

    <div class="progress-step progress-step-active" data-title="DEPARTMENT"></div>
    <div class="progress-step" data-title="BLOCK"></div>
    <div class="progress-step" data-title="TITLE"></div>
    <div class="progress-step" data-title="DESCRIPTION"></div>
    <div class="progress-step" data-title="DONE"></div>
  </div>

  <!-- start Steps 1-->
  <div class="form-step form-step-active">
    <br/>
    <div class="page-header">
        <h1>First, choose one department that is related to the complaint you are about to make.
          <span style="color:#ffef96; font-size:15px;"><br/>
          <p>Click any department for hint</p>
          </span>
        </h1>
    <br/>

    <div class="radio-toolbar">
        <input type="radio" id="radio1" name="cdepartment" class="hint" value="GENERAL" required/>
        <label for="radio1">GENERAL
          <span class="hintclick"> e-Aduan UiTM used for
            <span style="color:#ffef96">general complaints about UiTM.</span>
          </span>
        </label>

        <input type="radio" id="radio2" name="cdepartment" class="hint" value="FACILITIES"/>
        <label for="radio2">FACILITIES
          <span class="hintclick">For
            <span style="color:#ffef96">electrical, mechanical, telecommunications, event management.</span>
          </span>
        </label>

        <input type="radio" id="radio3" name="cdepartment" class="hint" value="ICT"/>
        <label for="radio3">ICT
          <span class="hintclick">e-Aduan ICT used for
            <span style="color:#ffef96">ICT complaints </span>
        </label>
    </div>

    <br/>
    </div><!-- page header-->

    <div class="width-50 ml-auto" >
      <a href="#" class="btn btn-next">NEXT</a>
    </div>
  </div>

  <!-- end Steps 1 -->

  <!-- start Steps 2 -->
  <div class="form-step">
    <br/>
    <div class="page-header">
    <h1>Second, which block do you wish to complaint about?</h1>
    <br/>

    <div class="radio-toolbar">
    <div class="grid-container">
    <?php
     $count=4;
     $sql="SELECT * FROM `block`";
     $result=mysqli_query($connection,$sql);

     while($std=mysqli_fetch_array($result))
      {
      ?>
        <input type="radio" id="<?php echo $std['bid'];?>" name="cblock" value="<?php echo $std['blockname'];?>" required/>
        <label for="<?php echo $std['bid'];?>"><?php echo $std['blockname'];?></label>
        <br/>
    <?php }?>
    </div>
    </div>

    </div> <!-- page header-->

    <div class="btns-group width-50 ml-auto">
      <a href="#" class="btn btn-prev">PREVIOUS</a>
      <a href="#" class="btn btn-next">NEXT</a>
    </div>
  </div>
  <!-- end Steps 2 -->

  <!-- start Steps 3 -->
  <div class="form-step">
    <br/>
    <div class="page-header">
    <h1>Third, pick a title or topic
      <span style="color:#ffef96; font-size:15px;"><br/>
      <p>If your related toppic is not listed, please fill in below text box instead.</p>
      </span>
    </h1>
    <br/>

    <div class="radio-toolbar">
        <input type="radio" id="radioApple" name="radioFruit" value="apple" required/>
        <label for="radioApple">Apple</label>

        <input type="radio" id="radioBanana" name="radioFruit" value="banana"/>
        <label for="radioBanana">Banana</label>

        <input type="radio" id="radioOrange" name="radioFruit" value="orange"/>
        <label for="radioOrange">Orange</label>
    </div>

    <div class="input-group">
        <textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
    </div>

    <br/>
    </div>

    <div class="btns-group width-50 ml-auto">
      <a href="#" class="btn btn-prev">PREVIOUS</a>
      <a href="#" class="btn btn-next">NEXT</a>
    </div>
  </div>
  <!-- end Steps 3 -->

  <!-- start Steps 4 -->
  <div class="form-step">
    <div class="page-header">
    <h1>Lastly, state your description regarding the complaint made
      <span style="color:#ffef96; font-size:15px;"><br/>
      <p> Below box you can write any notes about the complaint so the staff can help to understand</p>
      </span>
    </h1>
    <br/>

    <div class="input-group">
        <textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
    </div>
  
    </div>

    <div class="btns-group width-50 ml-auto">
      <a href="#" class="btn btn-prev">PREVIOUS</a>
      <button class="btn" type="submit" name="submit">SUBMIT</button>
    </div>
  </div>
  <!-- end Steps 4 -->

  <!-- start Steps 5 -->
  <div class="form-step">
    <div class="page-header">
    <h1>THANK YOU <br/>
    YOU CAN SEE RECENT COMPLAINT ON YOUR HOMEPAGE
    </h1>
  </div>
  <!-- end Steps 5 -->

</form>

CSS

  :root {
  --primary-color: rgb(165, 121, 64);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.width-50 {
  width: 30%;
}

.ml-auto {
  margin-left: auto;
}


/* Progressbar */
.progressbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  margin: 2rem  4rem;
}

.progressbar::before,
.progress {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  background-color: #dcdcdc;
  z-index: -1;
}

.progress {
  background-color: var(--primary-color);
  width: 0%;
  transition: 0.3s;
}

.progress-step {
  width: 2.1875rem;
  height: 2.1875rem;
  background-color: #dcdcdc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-step::before {
  counter-increment: step;
  content: counter(step);
}

.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 0.5rem);
  font-size: 0.85rem;
  color: #666;
}

.progress-step-active {
  background-color: var(--primary-color);
  color: #f3f3f3;
}

/* Form */
.form {
  width: 80%;
  margin: 30px auto;
  border: 1px solid #ccc;
  border-radius: 0.35rem;
  padding: 1.5rem;
box-shadow:
  4px 4px 4px 0px #d1d9e6 inset,
  -4px -4px 4px 0px #ffffff inset;
}

.form-step {
  display: none;
  transform-origin: top;
  animation: animate 0.5s;
}

.form-step-active {
  display: block;
}

.input-group {
  margin: 2rem 0;
}

@keyframes animate {
  from {
    transform: scale(1, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}
.row{
  height:100%;
  width: 50px;
}
/* Button */
.btns-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.btn {
  padding: 16px;
  display: block;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.2);
  color: #f3f3f3;
  text-align: center;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 15px 25px;
  box-shadow: 5px 8px 10px #888888;
}
.btn:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px ;
  color: #f3f3f3;
}
/* end progress bar*/

.radio-toolbar {
  margin-left: 10px;
  text-align: center;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #f0efef;
    padding: 10px;
    font-size: 18px;
    border: 3px solid #444;
    border-radius: 4px;
    width: 300px;
    height:auto;
}

.radio-toolbar label:hover {
  background-color: #c2d4dd;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #f0efef;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color:#a57940;
    border-color: #c2d4dd;
}

/* end radio button*/

.hint, label .hintclick {
  display: none;
  opacity: 0;
}

.hint:checked+ label .hintclick {
  display: block;
  opacity: 1;
  font-size: 17px;
  color: white;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto ;
}

.grid-container > label {
  width: 100%;
}

JS

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum++;
    updateFormSteps();
    updateProgressbar();
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}