Запустить часть только один раз?

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

У вас может быть флаг, который будет установлен в true каждый раз, когда поле не проходит проверку.Если после выполнения цикла установлен флаг «true», добавьте сообщение об ошибке.

Answer 2

Ну, это должно быть довольно просто - у вас уже есть логическая переменная, чтобы сказать, провалилась ли проверка - sendForm.Так что просто извлеките часть сообщения «addnd» из цикла и в 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 3

Используйте флаг, чтобы инициализировать его как false, и как только вы получите любое пустое поле, сделайте его истинным и напечатайте сообщение, только если флаг равен 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>

Answer 4

добавить логический флаг, чтобы указать, что вы уже отобразили сообщение

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