Verificar que todos los campos de entrada se hayan completado con jQuery

Question

Tengo 3 divs, cada uno con un campo de entrada de pocos dígitos y el siguiente botón activado. Quiero escribir un fragmento de jQuery que cuando se hace clic en el botón siguiente comprueba para asegurarse de que todos los campos de entrada DENTRO del mismo div como el botón, no son nulos.

He intentado lo siguiente sin suerte, pero estoy 100% seguro de que su mal, sólo yo puedo encontrar la información relevante en línea ...

http://jsfiddle.net/xG2KS/1/

Answer 1

Se podría utilizar para reducir filter el conjunto de todos los elementos input a sólo aquellos que están vacíos, y compruebe la propiedad length de lo que queda:

$(".next").click(function() { 
    var empty = $(this).parent().find("input").filter(function() { 
     return this.value === ""; 
    }); 
    if(empty.length) { 
     //At least one input is empty 
    } 
}); 

Tenga en cuenta que la definición de vacío en el código anterior es una cadena vacía. Si desea tratar los espacios en blanco como vacíos también, es posible que desee recortar el valor antes de comparar.

También tenga en cuenta que no es necesario pasar this a jQuery dentro de la función filter. El elemento DOM en sí tendrá una propiedad value, y es mucho más rápido acceder a eso en lugar de usar val.

Aquí hay un updated fiddle.

Answer 2

$('.next').click(function() { 
    var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; }); 
    if (emptyInputs.length) { 
     alert('Fail!'); 
    } 
}); 

Answer 3

$('.next').click(function() { 
    var inputs = $(this).parent().find('input[value=""]'); 
    if (!inputs.length) { 
     // you have empty fields if this section is reached 
    } 
});