如何為多個欄位為空顯示單個警報？

我有一個名字，姓氏和電子郵件的表單，如果欄位為空，我需要發出警報。我發了一個警報，但它出現了空的每個欄位。

這是JS：`

document.querySelector("#book").addEventListener("click", () => {
  let inp = document.querySelectorAll(".form-control");
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
      alert("All fields must be filled!");
    }
  }
});

`

表單控制類位于所有輸入欄位上。我若留3個輸入空，警惕出現3次。

請大家幫忙，我的大腦被卡住。

uj5u.com熱心網友回復：

您可以簡單地使用陣列來獲取單個array回圈完成內的所有錯誤，然后您可以提供最終警報。

document.querySelector("#book").addEventListener("click", () => {
  let inp = document.querySelectorAll(".form-control");
  let errors = [];
 
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
       errors.push("Error "  i);
    }
  }

  if(errors != []){
       alert("All fields must be filled!");
  }
});

uj5u.com熱心網友回復：

如果您想要通用訊息，您只能顯示一次，甚至停止回圈：

document.querySelector("#book").addEventListener("click", () => {
  let inp = document.querySelectorAll(".form-control");
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
      alert("All fields must be filled!");
      break; // <-- alert was shown, nothing else to do
    }
  }
});

如果要顯示單個訊息，但特定于缺少欄位，則必須在回圈中收集它們，并顯示單個訊息之后，類似

document.querySelector("#book").addEventListener("click", () => {
  let inp = document.querySelectorAll(".form-control");
  let missing=[];
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
      missing.push(inp[i].name);
    }
  }
  if(missing.length) {
    alert("Please fill the following fields too: " missing.join());
  }
});

uj5u.com熱心網友回復：

您可以使用該FormData物件，然后回圈遍歷所有條目。如果其中至少其中一個是空的，請發送一個警報并退出函式。

<form>
    <label for="firstName">First name:</label>
    <input type="text" placeholder="first name" name="firstName" />
    <label for="lastName">last name:</label>
    <input type="text" placeholder="last name" name="lastName" />
    <label for="email">First name:</label>
    <input type="text" placeholder="email" name="email" />
    <button type="submit">submit</button>
</form>

<script>
    const form = document.querySelector('form');

    const handleClick = (e) => {
        e.preventDefault();
        const formData = [...new FormData(e.target)];

        for (const [key, val] of formData) {
            if (!val) return alert('Failed to fill all fields.');
        }

        alert('Success!');
    };

    form.addEventListener('submit', handleClick);
</script>

uj5u.com熱心網友回復：

如果一個欄位不為空，您可以array.some在輸入上使用querySelectorAll()以僅引入一個警報

document.querySelector("#book").addEventListener("click", () => {
  let inputs = document.querySelectorAll(".form-control");
  if ([...inputs].some(input => input.value === '')) {
      alert("All fields must be filled !");
  }
});

<input class="form-control" />
<input class="form-control" />
<button id="book">validate</button>

uj5u.com熱心網友回復：

我們是一個布爾變數，要記住在回圈中查看它們是否為空。

document.querySelector("#book").addEventListener("click", () => {
  let anyEmpty = false;

  let inp = document.querySelectorAll(".form-control");
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
      anyEmpty = true;
      break;
    }
   
    if(anyEmptry) {
      alert("All fields must be filled!");
    }
  }
});

標籤：javascript 警报

上一篇：如果JSON中的值相同，如何從JSON中洗掉節點

下一篇：JavaScript將遞回遞減