Validate Popup Notification and prevent page refresh in SHOPIFY - validation

Question

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 %}