使用jQuery检查所有输入字段是否已填写

Question

我有3个div，每个div都有一些输入字段和下一个按钮。 我想编写一段jQuery代码，当点击下一个按钮时，它会检查与该按钮相同div中的所有输入字段是否为空。

我尝试了以下代码，但没有成功，但我确信它是错误的，只是我在网上找不到相关信息... http://jsfiddle.net/xG2KS/1/

- Liam

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

请注意，上述代码中“空”的定义是一个空字符串。如果你希望将空格也视为空，则在比较之前可能需要修剪该值。

另请注意，在filter函数内部不需要将this传递给jQuery。DOM元素本身将具有一个value属性，使用该属性访问速度更快，而不是使用val。

这是一个更新后的演示。

- James Allardice

---

如何在带有文本输入和选择框的表单中使用它？ - Abiel Muren

Answer 2

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

- Alex Pliutau

---

谢谢@Garvey！有没有一种方法可以说，如果任何输入为空，则抛出一个警报，而不是循环？ - Liam

我该如何包含选择(select)呢？ - Abiel Muren

Answer 3

由于没有针对这种情况的jQuery选择器，您可以扩展jQuery的选择器功能。

假设您选择了所有: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>

- gaetanoM

Answer 4

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

- user719958

---

这会说有空输入，即使没有，因为它查看的是“value”属性而不是属性本身。 - James Allardice

我不明白？由于我对jQuery的掌握不如应该，您能否解释一下？ - user719958

你使用了一个属性选择器来找出value值等于空字符串的元素。value属性是在元素本身上定义的：<input type='text' value='something'>。由于这些问题中的所有input元素都没有value属性，你的代码将始终说它们都是空的。 - James Allardice