我如何验证多个分组的输入？

Question

我在这里有这个结构：

<div>
  <div class="row">
    <input id="1a">
    <input id="1b">
  </div>
  <div class="row">
    <input id="2a">
    <input id="2b">
  </div>
  <div class="row">
    <input id="3a">
    <input id="3b">
  </div>
  <div class="row">
    <input id="4a">
    <input id="4b">
  </div>
</div>

如果用户将所有内容留空，则没有问题。但是，当他将某些内容输入1a并将1b留空时，这将导致错误。那么，如何确定每一行是否都填充了a & b？这有点棘手，我不知道该如何处理。

Answer 1

您可以通过这种简单的方法来实现

$('button').on("click", () => {
  $('body').find(".row").each(function(index, row){
     var count = 0;
     $(row).find("input").each(function(i, input) {
        if($(input).val() !== "")
         count++;
     })
     if(count === 1)
      alert("Row " + (index + 1) + " is invalid");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="row">
    <input id="1a">
    <input id="1b">
  </div>
  <div class="row">
    <input id="2a">
    <input id="2b">
  </div>
  <div class="row">
    <input id="3a">
    <input id="3b">
  </div>
  <div class="row">
    <input id="4a">
    <input id="4b">
  </div>
</div>

<button>Check</button>

Answer 2

类似的东西？

const  inRow  = document.querySelectorAll('.row')
  ,    valida = document.querySelector('button')
  ,    respon = document.querySelector('output')
  ;
valida.onclick =_=>
  {
  let OK = true
  inRow.forEach(eR=>
    {
    let vals = 0
    eR.querySelectorAll('input').forEach(eI=>{ vals+=eI.value.length ? 1:0 })
    if (vals===1) OK=false
    })
  respon.value = OK ? 'OK' : 'bad'
  }

<div>
  <div class="row">
    <input id="1a">
    <input id="1b">
  </div>
  <div class="row">
    <input id="2a">
    <input id="2b">
  </div>
  <div class="row">
    <input id="3a">
    <input id="3b">
  </div>
  <div class="row">
    <input id="4a">
    <input id="4b">
  </div>
</div>

<button>validate</button>

<output></output>