当用户未完成表单中的所有字段时如何为 onclick 加载器设置条件

Question

我的表格有问题，表格中有一些信息和要上传的照片。发送表格的时间根据文件的大小而不同，如果是 ~ 3MB 就可以，但是如果有人使用移动版本，他们会在 phone 中使用相机，然后照片可以重达7MB - 加载时间太长，用户会感到困惑。因此，我在 onclick 上使用了一个简单的加载器，在下一页上使用了 onload，效果很好，除非有人不填写表单中的字段，否则加载器会覆盖整个页面并永远转动。怎样才能让loader出现在oncick只有所有字段都正确填写的情况下？

有表格：

<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>

有js预加载器和加载器：


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";

}

我将不胜感激:)。

Answer 1

只需在启动您的函数之前检查所有字段是否已填写。顺便说一句，我建议您不要像使用 php 那样生成 html。不可读

Answer 2

只需将您的提交按钮更新为

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

Answer 3

谢谢 faso-dev！现在它工作得很好，但这里有一个小错误，我需要这样做：

按钮（需要点击）：

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

脚本：（很好！:)）

function teest() {
    const isNotEmpty = () => {
    let flag = true;

     document 
        .querySelectorAll("input")
        .forEach(input => flag =  input.value !== "" && flag);
      return flag;
    };

    document.getElementById('submitBtn').addEventListener('click',e => {
      let flag = isNotEmpty();
      if(!flag) {
        e.preventDefault();
        return;
      }
      var preloader = document.getElementById("preloader");
      preloader.style.opacity = "1";
      preloader.setAttribute("aria-busy", "false");
      document.getElementById("site").style.opacity = "0";
    })
    }

留给下一代^^。非常感谢 faso-dev！

当用户未完成表单中的所有字段时如何为 onclick 加载器设置条件

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

javascript

css

php

preloader

loader