Validar campos vacios en formulario con javascript una sola vez

[Alexis88]

No quería hacerlo así, pero en ese caso, la estructura cambia un poquito.

Código Javascript:

var form = document.getElementById("miFormulario"),
    salida = document.getElementById("miSalida");
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    
    salida.innerHTML = "Tienes que completar los siguientes campos:";
  
    var comodin = true,
        elementos = this.elements,
        total = elementos.length;
  
    for (var i = 0; i < total; i++){
        if (!elementos[i].value.length){
            salida.innerHTML += "<br />- " + elementos[i].name;
            elementos[i].className = "falta";
            comodin = false;
        }
        else{
            elementos[i].className = null;
        }
    }
  
    if (comodin){
        this.submit();
    }
    else{
        salida.style.display = "block";
    }
}, false);
 

Siendo salida un elemento HTML, ya sea un <div>, un <p> o cualquier otro elemento de bloque, en el que se listarán los campos en donde no se ingresaron datos. La clase CSS falta le asigna un borde de color rojo al elemento en el que no se ingresó datos.

Ejemplo
Código

Saludos