如何指出所有错误而不是逐个指定

Question

以下是鹅卵石脚本。它在你留下空白的那一刻起作用，它通过提交按钮指出它。但它很烦人，因为它指出了一个接一个，而不是马上删除所有空白的字段。

我该如何解决这个问题？请把它分成小号，因为这里的大目标是理解它，而不仅仅是做这件事。

document.forms[0].onsubmit= function() { 
 
    var form = document.forms[0]; 
 
    for (var i = 0; i < form.elements.length; i++) { 
 
     if (form.elements[i].value.length == 0) { 
 
      console.log(form.elements[i]); 
 
      form.elements[i].border = "1px solid red"; 
 
      form.elements[i].style.backgroundColor = "#FFCCCC"; 
 
      return false; 
 
     } 
 
    } 
 
}

<form method="post" action="" id="myForm"> 
 
    <div id="validation"></div> 
 
    <p><label>Name<br><input type="text" name="Name"></label></p> 
 
    <p><label>Email<br><input type="email" name="Email" ></label></p> 
 
    <p><input type="submit" value="Submit"></p> 
 
</form>

Answer 1

你return语句导致循环提前终止。如果你想要发信号给所有不完整的区域，就让它运行到最后。

document.forms[0].onsubmit= function(event) { 
    for (var i = 0; i < this.elements.length; i++) { 
     if (this.elements[i].value.length == 0) { 
      event.preventDefault(); 
      this.elements[i].style.border = "1px solid red"; 
      this.elements[i].style.backgroundColor = "#FFCCCC"; 
     } 
    } 
} 

---

而这里的写它一个更现代的方式，使用类和更新的语法。

document.querySelector("form").addEventListener("submit", function(event) { 
 
    for (const el of this.elements) { 
 
    if (el.classList.toggle("incomplete", el.value.length == 0)) { 
 
     event.preventDefault(); 
 
    } 
 
    } 
 
});

.incomplete { 
 
    border: 1px solid red; 
 
    background-color: #FFCCCC; 
 
}

<form method="post" action="" id="myForm"> 
 
    <div id="validation"></div> 
 
    <p><label>Name<br><input type="text" name="Name"></label></p> 
 
    <p><label>Email<br><input type="email" name="Email" ></label></p> 
 
    <p><input type="submit" value="Submit"></p> 
 
</form>

Answer 2

您一旦退出循环为形式的输入元件具有0长度：

if (form.elements[i].value.length == 0) { 
    .. .. 
    return false; 
} 

的return false;必须位于在循环之后，如果至少一个输入没有符合你的要求。
您可以使用boolean变量来存储此信息。

<script> 
document.forms[0].onsubmit= function() { 
    var form = document.forms[0]; 
    var hasError = false; 
    for (var i = 0; i < form.elements.length; i++) { 
     if (form.elements[i].value.length == 0) { 
      console.log(form.elements[i]); 
      form.elements[i].border = "1px solid red"; 
      form.elements[i].style.backgroundColor = "#FFCCCC"; 
      hasError = true; 
     } 
    } 

    if (hasError){ 
     return false; 
    } 
} 
</script>