Form input validation with JavaScript-CodePudding

I am making an app to upload information to sessionStorage. All seems dandy, but for some reason my file upload validation doesn't seem to work.

It shows the alert, but still lets me to upload as much (or as little) number of items as i wish. it's not required to upload any images, but if users wants to, he/she should only be allowed to upload more than 3 or less than 10 files.

You can also see the code to save users input, it works fine, but maybe somehow it could mess validation code.

const input = document.querySelector('#images');

input.addEventListener('change', (e) => {
  const files = input.files;
  if (files.length < 3 || files.length > 10) {
    alert(`Only more than 3 and less than 10 files are allowed to upload`);
    return;
  }
};

input saving code, works fine (as far as i can tell)

let pizzas = [];

const addPizza = (ev) => {
  ev.preventDefault();
  if (document.getElementById("name").value.length == 0 || document.getElementById("heat").value.length == 0 || document.getElementById("price").value.length == 0 ||
    document.getElementById("toppings1").value.length == 0 || document.getElementById("toppings2").value.length == 0) {
    alert("Please fill the required fields")
  } else {
    let pizza = {
      pizzaName: document.getElementById('name').value,
      pizzaPrice: document.getElementById('heat').value,
      pizzatoppings1: document.getElementById('toppings1').value,
      pizzatoppings2: document.getElementById('toppings2').value,
      pizzatoppings3: document.getElementById('toppings3').value,
      pizzatoppings4: document.getElementById('toppings4').value,
      pizzatoppings5: document.getElementById('toppings5').value,
      pizzaImages: document.getElementById('images').value,
    }
    pizzas.push(pizza);
    document.querySelector('form').reset();
    //pasichekint consoleje
    console.warn('added', {
      pizzas
    });
    sessionStorage.setItem('MyPizzaList', JSON.stringify(pizzas));
  }
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', addPizza);
});

html added post edit

<html>
<form>

            
            <input type="text" id="name" name="name" placeholder="name of the pizza:*" 
                required size="20" maxlength="30"> <br> <!--unique has to to be made in JS-->
              
        
            <input type="number" id="price" name="price" placeholder="price:*" 
                required size="20" min="0" max="999" step="0.01" oninput="validity.valid||(value='');"><br> <!--done-->

        
            <input type="number" id="heat" name="heat" placeholder="hotness:" 
                size="20" min="1" max="3" step="1" oninput="validity.valid||(value='');"><br> <!--done-->

            <label for="toppings"><strong>Add Toppings:</strong></label><br>

                <input type="text" id="toppings1" name="topping1" placeholder="topping 1*"
                required size="20" maxlength="30"><br>

                <input type="text" id="toppings2" name="topping2" placeholder="topping 2*"
                required size="20" maxlength="30"><br>

                <input type="text" id="toppings3" name="topping3" placeholder="topping 3"
                 size="20" maxlength="30"><br>

                <input type="text" id="toppings4" name="topping4" placeholder="topping 4"
                size="20" maxlength="30"><br>  
                
                
                <input type="text" id="toppings5" name="topping5" placeholder="topping 5"
                size="20" maxlength="30"><br> <!-- kinda done, needs to figure out id/name/ while doing JS-->


            <label for="images"><strong>Upload photos:</strong></label>
            <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png" multiple> <br> <!--done-->
        
            <button id="btn" >Add Pizza</button>   <p>required fields indicated by *</p>


        </form>

</html>

CodePudding user response：

You need to reset the input if validation fails by assigning null to the input value.

if (files.length < 3 || files.length > 10) {
    alert(`Only more than 3 and less than 10 files are allowed to upload`);
    input.value = null;
    return;
}