檢查所有輸入字段是否已用jQuery填寫

Question

我有3個div，每個div都有一個dfew輸入字段和下一個按鈕。 我想編寫一個jQuery片段，當單擊下一個按鈕時，它會檢查以確保與按鈕位於同一div的所有輸入字段不為空。

我試過以下沒有運氣，但我100％肯定是錯的，只是我無法在網上找到相關信息......

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

Answer 1

您可以使用filter將所有input元素的集合減少為僅為空的那些，並檢查剩余的length屬性：

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

請注意，上面代碼中的empty定義是一個空字符串。 如果要將空格也視為空，則可能需要在比較之前修剪該值。

另請注意，無需this函數傳遞給filter函數中的jQuery。 DOM元素本身將具有value屬性，訪問它而不是使用val要快得多。

這是一個更新的小提琴 。

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

因為在這種情況下沒有jQuery選擇器，所以可以擴展jQuery的選擇器功能。

假設您選擇all ：text元素，擴展名為：

$.extend($.expr[':'],{
     isEmpty: function(e) {
         return e.value === '';
     }
});

因此，您可以選擇所有空文本字段：

$(this).closest('div').find(':text:isEmpty');

 $.extend($.expr[':'], { isEmpty: function (e) { return e.value === ''; } }); $('.next').click(function () { var missingRequired = $(this).closest('div').find(':text:isEmpty'); console.log('Empty text fields: ' + missingRequired.length); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> <input type="submit" value="next" class="next" /> </div> <div> <input type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> <input type="submit" value="next" class="next" /> </div> <div> <input type="text" /><br /> <input type="text" /><br /> <input type="submit" value="next" class="next" /> </div> 

Answer 4

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