JavaScript: Закрытие модала при правильных значениях

Добрый день,

В настоящее время я почти закончил создание модала с Vanilla JS, сейчас мои "Age Gate" проверяют, если возраст пользователя меньше 18 лет, и выводят ошибку 'Invalid Credentials',

Я попытался пойти дальше, пытаясь закрыть модал на правильном значении, а затем модал закрылся,

Пожалуйста, смотрите мой код ниже для JS:

const modal = document.getElementById("myModal");
const form = document.querySelector('form');
const loading = document.getElementById("loading");
const btnSubmit = document.getElementById('btnSubmit');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

// Functions

function onlyNumbers(e) {
  const ageGate = document.querySelectorAll('.ageGate');
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  const errMsgDiv = document.getElementById('errorMsg');

  let containsNumber = false
  ageGate.forEach(input => {
    if(numbers.some(num => input.value.includes(num))) containsNumber = true;
  })
  if (containsNumber || ageGate.value !== numbers && ageGate.value == '' || ageGate[2].value < 2004) {
    let paragraph = document.createElement('p');
    paragraph.innerHTML = 'Invalid Credentials';
    errMsgDiv.append(paragraph);
    e.preventDefault()
    }  else if (containsNumber = true) {
        btnSubmit.remove()
        loading.classList.remove('hide')
    }
    
};

и теперь модальный html:

<div id="modal">
            <div class="modal-content">
                <div class="flex-container">
                    <div>
                        <img
                            src="{% static 'imgs/Fireball_logo.png' %}"
                            class="logo"
                            alt="fireball logo"
                        />
                        <h1>WOAH THERE!</h1>
                        <p class="info-text">We just need to see something</p>
                    </div>
                    <form action="">
                        {% csrf_token %}
                        <div class="form-flex">
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="DD"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="2"
                                placeholder="MM"
                            />
                            <input
                                class="ageGate"
                                type="text"
                                max-length="4"
                                placeholder="YYYY"
                            />
                        </div>
                        <p class="cookie-policy">
                            <small>
                                This site uses cookies. Cookie Policy. I agree
                                to the terms of use, and the privacy policy.
                                This information will not be used for marketing
                                purposes
                            </small>
                        </p>
                        <div class="text-center">
                            <button id="btnSubmit" class="btn" type="submit">
                                <p class="btn-text">Enter</p>
                            </button>
                            <img 
                                src="{% static 'imgs/spinner.gif' %}"
                                alt="spinner" 
                                id="loading" 
                                class="loading close">
                        </div>
                        <span id="errorMsg"></span>
                    </form>
                    <div>
                        <img
                            src="{% static 'imgs/Drinkaware_logo.png' %}"
                            alt="Drinkaware Logo"
                        />
                    </div>
                </div>
            </div>
        </div>

Пожалуйста, как обычно, я вроде как новичок во всем этом, но я определенно пытаюсь, поэтому в вашей помощи, пожалуйста, могу я попросить краткое объяснение вашего решения, чтобы я мог увидеть, как думать как разработчик, так как такого рода информация действительно помогает мне

Спасибо!

function onlyNumbers(e) {
  e.preventDefault()
  const ageGate = document.querySelectorAll('.ageGate');
  const errMsgDiv = document.getElementById('errorMsg');

  const year = ageGate[2].value;
  const month = ageGate[1].value;
  const day = ageGate[0].value;
  const userBirthday = new Date(year, month - 1, day);

  // Date Right Now
  const today = new Date();
  // Users age in years
  const acceptingYear = today.getFullYear() - userBirthday.getFullYear()

  if (acceptingYear < 18 || 
      acceptingYear == 18 &&
      today.getMonth() < userBirthday.getMonth() ||
      today.getMonth() == userBirthday.getMonth() &&
      today.getDate() < userBirthday.getDate()
      ) {
      let paragraph = document.createElement('p');
      paragraph.innerHTML = 'Invalid Credentials';
      errMsgDiv.append(paragraph);
  } else {
    btnSubmit.remove()
    loading.classList.remove('hide')
    modal.classList.add('close');
    }
    
};