只运行一次？

Question

我有一个for循环，通过class="required"通过每个输入，它的空它改变了它的背景色。此外，它还向页面的一部分添加了一条消息：“需要红色背景色的字段”。但是，我只希望消息显示一次。即使5个字段为空，也只应显示一条消息。有什么建议么？

继承人我的代码：

<script type="text/javascript" > 
window.onload = function() { 
document.getElementById("formID").onsubmit = function() { 
    var fields = this.getElementsByClassName("validate"), 
     sendForm = true; 
    for(var i = 0; i < fields.length; i++) { 
     if(!fields[i].value) { 
      fields[i].style.backgroundColor = "#ffb8b8"; 

    var inst = document.getElementById('inst'); 
     var reason = inst.insertRow(-1); 
     var cell1=reason.insertCell(0); 
     cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>'; 
     inst.appendChild(reason); 


    sendForm = false; 
     } 

    else { 
      fields[i].style.backgroundColor = "#fff"; 
     } 
} 
    if(!sendForm) { 
     return false; 
    } 
} 
} 
</script> 

Answer 1

这应该是相当简单 - 你已经有了一个布尔变量来说明验证是否失败 - sendForm。因此，只需将“append message”部分从循环中移出并放入if。

document.getElementById("formID").onsubmit = function() { 
    var fields = this.getElementsByClassName("validate"), 
     sendForm = true; 
    for(var i = 0; i < fields.length; i++) { 
     if(!fields[i].value) { 
      fields[i].style.backgroundColor = "#ffb8b8"; 

      sendForm = false; 
     } 

    else { 
      fields[i].style.backgroundColor = "#fff"; 
     } 
    } 
    if(!sendForm) { 
     var inst = document.getElementById('inst'); 
     var reason = inst.insertRow(-1); 
     var cell1=reason.insertCell(0); 
     cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>'; 
     inst.appendChild(reason); 
     return false;    
    } 
} 

Answer 2

可能您被设置为true任何时间的字段验证失败的标志。循环执行后，如果该标志为真，则附加错误消息。

Answer 3

添加一个布尔标志，以表明您已经显示的消息

window.onload = function() { 
    var notified = false; 

    for(var i = 0; i < fields.length; i++) { 
     if(!fields[i].value) { 
      fields[i].style.backgroundColor = "#ffb8b8"; 
      ... 
      if (!notified) { 
       cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>'; 
       inst.appendChild(reason); 
       notified = true; 
      } 
      .... 
} 

Answer 4

使用标志初始化为假，一旦u得到任何的空场，使其真实，只打印如果消息国旗是错误的。这里

<script type="text/javascript" > 
window.onload = function() { 
document.getElementById("formID").onsubmit = function() { 
    var fields = this.getElementsByClassName("validate"), 
     sendForm = true; 
    var flag=false; 
    for(var i = 0; i < fields.length; i++) { 
     if(!fields[i].value) { 
      fields[i].style.backgroundColor = "#ffb8b8"; 
    if(flag==false) { 
     var inst = document.getElementById('inst'); 
     var reason = inst.insertRow(-1); 
     var cell1=reason.insertCell(0); 
     cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>'; 
     inst.appendChild(reason); 
    } 
    flag=true; 


    sendForm = false; 
     } 

    else { 
      fields[i].style.backgroundColor = "#fff"; 
     } 
} 
    if(!sendForm) { 
     return false; 
    } 
} 
} 
</script>