Sprawdź, czy wszystkie pola wejściowe zostały wypełnione za pomocą jQuery

Question

Mam 3 elementy div, każdy z polami wprowadzania danych dfew i następnym przyciskiem. Chcę napisać fragment kodu jQuery, który po kliknięciu następnego przycisku sprawdza, czy wszystkie pola wejściowe w tym samym dziale div, co przycisk, nie mają wartości null.

Próbowałem następujących bez powodzenia, ale im 100% pewnym jej źle, tylko nie mogę znaleźć odpowiednich informacji w Internecie ...

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

Answer 1

Można użyć filter zmniejszyć zbiór wszystkich input elementów tylko do tych, które są puste, i sprawdzić właściwość length co pozostaje:

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

Należy zauważyć, że definicja pustej w powyższym kodzie jest pustym ciągiem. Jeśli chcesz, aby puste miejsca były puste, przed porównaniem możesz chcieć je przyciąć.

Należy również pamiętać, że nie ma potrzeby przekazywania this do jQuery wewnątrz funkcji filter. Sam element DOM będzie miał właściwość value, a dostęp do niego będzie znacznie szybszy, zamiast korzystania z val.

Oto 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 
    } 
});