Validar campos vacios en formulario con javascript una sola vez

[Alexis88]

Bienvenida a FDW

En lugar de hacerlo elemento por elemento, hazlo todo de una vez, al fin y al cabo, el proceso es el mismo.

Código Javascript:

var formulario = document.getElementById("id_formulario"),
    comodin = true;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
 
    var elementos = this.elements;
    for (var i in elementos){
        if (!elementos[i].value.length){
            alert("Debe de completar el campo " + elementos[i].name);
            comodin = false;
            break;
        }
    }
 
    if (comodin){
        this.submit();
    }
}, false);
 

Ahora la explicación. Primero, defino dos variables; la primera de ellas representa al formulario en cuestión al cual tomo por su id y la segunda es una variable que utilizaré como comodín para determinar si todos los campos del formulario se completaron o no y así enviar o no los datos del mismo para su procesamiento. Dicho comodín iniciará con el valor booleano true. Luego, con el método addEventListener, registro el evento submit, el cual es el que se ejecuta cuando enviamos los datos de un formulario a procesarse. Esto lo hago para ejecutar una función cuando esto se produzca.

Con el método preventDefault, prevengo que se ejecute dicho evento, lo cual me permitirá evaluar a cada elemento del formulario. Enseguida, tomo al conjunto de elementos del formulario y con ayuda de una estructura repetitiva (bucle), en este caso un for...in, los itero. En cada iteración, verifico la longitud del contenido de cada elemento; si ésta es falsa, es decir, si no hay contenido alguno en el elemento, muestro un mensaje de alerta en el cual le indico al usuario que debe de completar el campo cuyo nombre especifico al final de la línea, además, el valor del comodín cambiará a false y con la sentencia break, corto el flujo del bucle, saliendo del mismo puesto que al haberse detectado un elemento vacío, no deben de enviarse los datos para procesarse.

Finalmente, realizo la evaluación del comodín; si su valor es verdadero, que da igual colocar de cualquiera de las siguientes formas:

Código Javascript:

if (comodin == true) //Forma válida
if (comodin) //Forma válida
 

Entonces, quiere decir que todos los campos del formulario han sido completados, puesto que el valor del comodín solamente cambia cuando se detecta un campo vacío, por lo tanto, procedo a enviar los datos del formulario haciendo uso del método submit. Obviamente si el valor del comodín es falso, es decir, si se detectó algún elemento del formulario sin completar, no se realizará el envío de los datos. Antes de que me lo preguntes, la palabra reservada this, en este caso hace referencia al formulario al que estamos afectando.

Saludos