JavaScript: Валидация возрастных ворот

Я создаю приложение, для входа на сайт или в конкурс пользователь должен быть старше 18 лет

Я изо всех сил старался получить валидацию на вводимых данных, я изо всех сил старался создать JS

Что должно произойти Когда пользователь вводит алфавитно-цифровой символ или оставляет ввод пустым, должен появиться div с сообщением об ошибке "Invalid Credentials", затем, если оно принято, модальное окно должно закрыться

вот мой 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>
                        </div>
                        <span id="errorMsg"></span>
                    </form>
                    <div>
                        <img src="{% static 'imgs/Drinkaware_logo.png' %}" alt="Drinkaware Logo">
                    </div>
                </div>
            </div>
        </div>

и мой файл JavaScript:

const modal = document.getElementById("myModal");
const btnSub = 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');
        
     
    if (ageGate.value !== numbers && ageGate.value == '' || ageGate[2].value < 2004) {
    let paragraph = createElement('p');
    paragraph.innerHTML = 'Invalid Credentials';
    errMsgDiv.append(paragraph);
    console('Hello')
} else {
    modal.classList.toggle('hide');
}
    
    // Event Listeners
    btnSub.addEventListener('click', onlyNumbers)

Если вы можете помочь мне сделать это правильно и если вы можете включить лучшие практики кода, чтобы помочь мне в моей карьере, большое спасибо

Приветствует

Тревор Леманн

Несколько вещей:

  • Вы не можете проверить, содержит ли строка значение в элементе, просто используя оператор !=. Вместо этого вы должны использовать Array.some

  • Вы должны остановить отправку формы. Вызовите preventDefault на событие

    .

  • Слушатель onlyNumbers лучше всего вызывать при отправке формы, а не при нажатии на кнопку. Это позволит ему учитывать все попытки отправки формы, включая нажатие кнопки 'Enter' в поле ввода

    .

  • createElement должно быть document.createElement

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

// 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()
  }

};

// Event Listeners
form.addEventListener('submit', onlyNumbers)
<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>
        </div>
        <span id="errorMsg"></span>
      </form>
      <div>
        <img src="{% static 'imgs/Drinkaware_logo.png' %}" alt="Drinkaware Logo">
      </div>
    </div>
  </div>
</div>

Вернуться на верх