Jquery - 如何检查 div 中的所有输入是否不为空？答案

【问题标题】：Jquery - How to check if all inputs in a div are not empty?Jquery - 如何检查 div 中的所有输入是否不为空？
【发布时间】：2016-12-30 15:30:19
【问题描述】：

在某个 div 中寻找一种简单的方法来验证所有必需的输入。换句话说，确保某个 div 中所有必需的输入都不为空。

在here 中找到的以下代码显示了一种检查给定页面上所有输入并确保它们不为空（包括其中只有空格的输入）的方法。

我正在尝试做同样的事情。就在某个 div 内和所有必需的输入。

$("input").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

您可以做同样的事情，但您应该更改选择器以仅针对给定 div 内的输入并添加 [required] 选择器以仅选择具有 required 属性的那些：

$("div_selector input[required]").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;

希望这会有所帮助。

$('button').on('click',function(){
  var result = $("#div_selector input[required]").filter(function () {
    return $.trim($(this).val()).length == 0
  }).length == 0;

  console.log(result);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='first' required> Required input out of the div 

<div id='div_selector'>
  <input name='second' required> Required input
  <br>
  <input name='Third'>
  <br>
  <input name='Fourth' required> Required input
</div>
<br>
<button>Check</button>

【讨论】：

【解决方案2】：

这是一个使用 Array.reduce() 的简单单行代码：

$(".your-div input").reduce((allFilled, input) =>
  allFilled && $.trim($(input).val()) !== "", true)

【讨论】：

谢谢，这是一种非常巧妙的方法。这会返回布尔值吗？
是的！ Array.reduce() 的好处是您可以定义它最终返回的内容。在我的示例中，我传入true作为初始结果值，并且在每个元素的回调中，我们也返回一个布尔值，因此最终结果将是相同的。

【解决方案3】：

这种方法将匹配任何输入，无论是输入、选择、文本区域等

var canSubmit = true;
$.each($('.div-in-question').find(':input'), function(element, index){
    canSubmit = canSubmit && ($(element).val() !== '');
});
// at this point canSubmit will be true or false and you can act upon it

【讨论】：

如果我在 find() 中添加了 input[required]。这会奏效。对吗？