Run part of for only once?

I have a for loop that goes through each input with class="required" , and it its empty it changes its background color. Also, it adds a message to part of the page: "Fields with red background color are required". But, I only want the message to be displayed once. Even if 5 fields are empty, only one message should be displayed. Any suggestions?

Heres my code:

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

You could have a flag that gets set to true any time a field fails validation. After the execution of the loop, if the flag is true, append the error message.

Well this should be rather simple - you've already got a boolean variable to say whether the validation has failed - sendForm. So just take the "append message" part out of the loop and into the 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;            
    }
}

Use a flag initialize it to false and once u get any empty field make it true and print the message only if flag is false. Here

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

add a boolean flag to indicate that you have already displayed the message

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;
            }
            ....
}