I am creating an app that a user must be over 18 to enter the site or competition,

I have tried my best to get the validation on the inputs, I have tried my best to create the JS

What Must Happen When the user either inputs a alphanumeric character or leaves the input empty, there should be a div that appears with the error message underneath that says "Invalid Credentials", then if its accepted, The modal should close

here is my html:

<div id="modal">
            <div >
                <div >
                    <div>
                        <img src="{% static 'imgs/Fireball_logo.png' %}"  alt="fireball logo">
                        <h1>WOAH THERE!</h1>
                        <p >We just need to see something</p>
                    </div>
                    <form action="">
                        {% csrf_token %}
                        <div >
                            <input  type="text" max-length="2" placeholder="DD">
                            <input  type="text" max-length="2" placeholder="MM">
                            <input  type="text" max-length="4" placeholder="YYYY">
                        </div>
                        <p >
                            <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 >
                            <button id="btnSubmit"  type="submit">
                                <p >Enter</p>
                            </button>
                        </div>
                        <span id="errorMsg"></span>
                    </form>
                    <div>
                        <img src="{% static 'imgs/Drinkaware_logo.png' %}" alt="Drinkaware Logo">
                    </div>
                </div>
            </div>
        </div>

and my JavaScript file:

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)

If you could help me get this right and if you could include best code practices to assist me in my career, thank you so much

Regards

Trevor Lehmann

CodePudding user response：

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 >
    <div >
      <div>
        <img src="{% static 'imgs/Fireball_logo.png' %}"  alt="fireball logo">
        <h1>WOAH THERE!</h1>
        <p >We just need to see something</p>
      </div>
      <form action="">
        {% csrf_token %}
        <div >
          <input  type="text" max-length="2" placeholder="DD">
          <input  type="text" max-length="2" placeholder="MM">
          <input  type="text" max-length="4" placeholder="YYYY">
        </div>
        <p >
          <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 >
          <button id="btnSubmit"  type="submit">
                                <p >Enter</p>
                            </button>
        </div>
        <span id="errorMsg"></span>
      </form>
      <div>
        <img src="{% static 'imgs/Drinkaware_logo.png' %}" alt="Drinkaware Logo">
      </div>
    </div>
  </div>
</div>