部分を1回だけ実行しますか？

Question

私はclass="required"で各入力を通過するforループを持っていて、空であればその背景色が変わります。また、ページの一部にメッセージを追加します。「赤色の背景色のフィールドは必須です。しかし、私はそのメッセージを一度表示したいだけです。 5つのフィールドが空であっても、1つのメッセージしか表示されません。助言がありますか？

HERESに私のコード：

<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。だから、 "メッセージを追加する"部分をループの外に出て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

がfalseに初期化し、uは任意の空のフィールドは、それが本当作る取得した場合にのみメッセージを印刷したら、フラグを使用して表示していることを示すためにブールフラグを追加flagはfalseです。ここに

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