[Answered ]-JavaScript: Age Gate Validation

by

1👍

✅

A few things:

  • You can’t check whether a string contains a value in an item just by using the != operator. You instead have to use Array.some

  • You have to stop form submission. Call preventDefault on the event

  • The onlyNumbers listener should best be fired on form submission, not on button click. This allows it to account for all attempts to submit the form, including clicking ‘Enter’ in an input

  • createElement should be 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>
👤Spectric

Leave a comment