Validate Popup Notification and prevent page refresh in SHOPIFY

I have a popup notification that gets triggered when the customer adds an "out-of-stock" product to their cart. Right now, the popup appears for 2 seconds and then the page refreshes to the cart page. What I would like is the radio button on the form must be clicked and validated before closing the popup and THEN the cart page loads. I cannot figure out exactly how to write this in the javascript functions. Please take a look at the coding I have:

Add-to-cart button

<button 
  {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
  {% if current_variant.inventory_quantity == 0 %}
    class="btn btn--full add-to-cart.openButton" 
    onclick="openForm()"{% endif %}
  name="add"
  id="AddToCart-{{ section_id }}"
  class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %}"
 {% unless current_variant.available %} disabled="disabled"{% endunless %}>

Popup Notification HTML

    <div class="loginPopup">
      <div class="formPopup" id="popupForm">
     <form action="/action_page.php" class="formContainer" onsubmit="return validate();">
          <h2>This Product is</br><b style="color: #FF2629">OUT OF STOCK</b></h2>
            <p>Unfortunately, this product is unavailable. By selecting the check box below, you agree to the acknowledgment that this product is not in-stock and the ETA for shipping is unknown at the time. </p>
            <p><b>*Accept Acknowledgment</b></p>
            <input type="radio" id="html" name="fav_language" value="HTML"  onclick="validate()" required="required">
  <label for="html">Agree (required to add to cart)</label>
          <button type="submit" class="btn cancel" onclick="closeForm()">Submit</button></form>

Javascript and CSS

<script>
function openForm() {document.getElementById("popupForm").style.display = "block"; e.preventDefault();}
  
  
function validate()
  {
        if (document.getElementById('html').checked) {
            return true;}
       else {
            alert("Unchecked form will not be submitted");
            return false;
        }
    }
    
   function closeForm() {
        document.getElementById("popupForm").style.display = "none";
      } 
</script>

{% style %}
     * {
        box-sizing: border-box;
      }
      .openBtn {
        display: flex;
        justify-content: left;
      }
      .openButton {
        border: none;
        border-radius: 5px;
        background-color: #1c87c9;
        color: white;
        padding: 14px 20px;
        cursor: pointer;
        position: fixed;
        preventDefault();
      }
      .loginPopup {
        position: relative;
        text-align: center;
        width: 100%;
      }
      .formPopup {
        display: none;
        position: fixed;
        left: 45%;
        top: 5%;
        transform: translate(-50%, 5%);
        border: 3px solid #999999;
        z-index: 9;
      }
      .formContainer {
        max-width: 600px;
        padding: 20px;
        background-color: #fff;
      }
      .formContainer input[type=radio],
 {
        width: 100%;
        padding: 15px;
        margin: 5px 0 20px 0;
        border: none;
        background: #eee;
      }
      .formContainer input[type=radio]:focus {
        background-color: #ddd;
        outline: none;
      }
      .formContainer .btn {
        padding: 12px 20px;
        border: none;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        width: 100%;
        margin-bottom: 15px;
        opacity: 0.8;
      }
      .formContainer .cancel {
        background-color: #143c8e;
      }
      .formContainer .btn:hover,
      .openButton:hover {
        opacity: 1;
      }  

 {% endstyle %}