检查所有输入字段是否已用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
    }
});