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