时间戳

首页 > 解决方案 > 如何获得空输入字段的计数？

javascript - 如何获得空输入字段的计数？

问题描述

如何检查特定 ID (form1, form2) 中不完整输入字段的数量。如果 2 个输入字段为空，我想要一个类似“不完整输入 2”的消息，如何在 JS 中执行此操作？

<div id="form1">
 <span>Number of Incomplete Input: 2</span>
 <input type="text" value="">
 <input type="text" value="">
</div>

<div id="form2">
 <span>Number of Incomplete Input: 1</span>
 <input type="text" value="Test">
 <input type="text" value="">
</div>

这是 JS，它正在工作，我有多个 JS，其名为的类分配给每个输入并获取值，但我需要检查 ID 内的所有输入字段。

$(document).on("click", "#form1", function() {
            
        var count = $('input').filter(function(input){
            return $(this).val() == "";
        }).length;

        alert(count);
        
    });

标签： javascriptjquery

解决方案

你的 html 结构，尤其是表单结构不正确，所以你应该先在表单中添加一些可以点击的提交按钮。然后您可以在表单提交时添加事件侦听器。在事件处理程序中，您应该使用 选择表单标记内的子输入$(this).children("input")。现在您可以过滤它们。

$(document).on("submit", "#form1", function (e) {
  e.preventDefault();
  var count = $(this)
    .children("input")
    .filter(function (input) {
      return $(this).val() == "";
    }).length;

  alert(count);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
    <span>Number of Incomplete Input: 2</span>
    <input type="text" value="">
    <input type="text" value="">
    <button type="submit">Submit</button>
</form>

推荐阅读