javascript - 检查表单内的任何输入是否为空

Question

我想要做的是检查是否有任何具有所需属性的输入为空。如果确实如此，则发出“空”警报，但它仅检测第一个输入。有什么想法，帮忙吗？

$(document).ready(function(){
    $("button").click(function(){
        if(!$("form input[required]").val()){
            alert("empty");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
</form>
<button>test</button>

Answer 1

$("form input[required]").val() 将仅返回具有 required 属性的第一个输入的值。

您需要迭代每个所需的输入元素并检查它是否有值 - 可能通过 trim (如下所示)以排除空白值。

$(document).ready(function() {
  $("button").click(function() {
    var $empty = $("form input[required]").filter(function() {
        return !this.value.trim();
      }),
      valid = $empty.length == 0,
      items = $empty.map(function() {
        return this.placeholder
      }).get();

    if (!valid) {
      alert("below itema are empty: \n" + items.join('\n'));
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input type="text" placeholder="Item A" required/>
  </div>
  <div>
    <input type="text" placeholder="Item B" required/>
  </div>
  <div>
    <input type="text" placeholder="Item C" required/>
  </div>
</form>
<button>test</button>