How to make a condition for onclick loader when user don't completed all fields in form

Question

I have a problem with the form, there is some information in the form and a photo to upload. The time to send the form is different depending on the weight of the file, if it is ~ 3MB it's ok, however if someone uses the mobile version they use the camera in the phone and then the photo can weigh up to 7MB - then the loading time is too long and the user is confused. Therefore I used a simple loader on onclick and the same with onload on the next page, works great, unless someone don't fill the field in the form, then the loader covers the whole page and turns forever. How can I make the condition that the loader appears on oncick only if all fields are completed correctly?

There's form:

<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="https://raziraz.github.io/codepen/img/bolt.svg">
</div> 

    <main id="site" role="main">
    <script  src="./preloaderr.js"></script>

        <h2>Dodaj nową licencję</h2>
        <form method="POST" action="Licencja_Użytkownik_Dodawanie_Skrypt.php" enctype="multipart/form-data">
        <input type="hidden" name="login" value="$login">

        <div id="inputtitle">Prześlij zdjęcie</div>
        <input type="file" name="licencja_plik" required>
        </br>

        <div id="inputtitle">Numer licencji</div> 
        <input type="text" name="Numer_Licencji"  placeholder="Numer licencji" required></br>

        <div id="inputtitle">Numer wypisu</div> 
        <input type="text" name="Numer_Wypisu"  placeholder="Numer wypisu" required></br>

        <div id="inputtitle">Miasto</div> 
        <input type="text" name="Miasto_Licencji"  placeholder="Miasto" required></br>

        <div id="inputtitle">Numer rejestracyjny</div> 
        <input type="text" name="Numer_Rejestracyjny"  placeholder="Numer rejestracyjny" required></br>

        <div id="inputtitle">Licencja ważna do:</div> 
        <input type="date" name="Licencja_Do"  placeholder="05-02-2020" required></br>

        <div id="containera">
        <div id="right">

        <button type="submit" class="buttondodaj" onclick="teest(); window.parent.parent.scrollTo(0,0)">
        Dodaj&nbsp;&nbsp;&nbsp;<i class="fas fa-arrow-right"></i>
        </button>

        </form></div>

        <form method="GET" action="Licencja_Użytkownik.php" >
        <input type="hidden" name="login" value="$login">

        <div id="left">

        <button type="submit" class="buttonanuluj">
        <i class="fas fa-arrow-left"></i>&nbsp;&nbsp;&nbsp;Anuluj
        </button>

        </form>
        </div>
        </div>
    </main>

There's js preloader and loader:

function preloader() {
  var preloader = document.getElementById("preloader");
  preloader.style.opacity = "0";
  preloader.setAttribute("aria-busy", "false");
  document.getElementById("site").style.opacity = "1";
}
window.onload = preloader;


function teest() {
  var preloader = document.getElementById("preloader");
  preloader.style.opacity = "1";
  preloader.setAttribute("aria-busy", "false");
  document.getElementById("site").style.opacity = "0";

}

I will be grateful for the hints :).

Answer 1

Just update your submit button to

<button type="submit" 
        class="buttondodaj" 
        id="submitBtn" window.parent.parent.scrollTo(0,0)"
>
   Dodaj&nbsp;&nbsp;&nbsp;<i class="fas fa-arrow-right"></i>
</button>

//Return true if the form is not empty, false if it is
const isNotEmpty = () => {
  //supose the form is not empty
  let flag = true;
  //For all input, check if the value is different of empty
  document
    .querySelectorAll("input")
    .forEach(input => flag =  input.value !== "" && flag);
  return flag;
};

//Listen when user click on the submit button
document.getElementById('submitBtn').addEventListener('click',e => {
  let flag = isNotEmpty();
  if(!flag) {
    //don't submit form because it's empty
    e.preventDefault();
    //don't display the placeholer loader
    return;
  }
  //Now we can display the placeholder
  //So put the placeholder loader logic here
})