Как я могу проверить несколько сгруппированных входов?

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

как то так?

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>

Answer 2

Обычно несколько элементов управления формы (например, <input>, <textarea>, <select>, et c) должны быть внутри тега <form> . Кроме того, описанное поведение называется проверкой формы , для которого требуется, чтобы упомянутый тег <form> был вызван "submit" событием .

• Следующие демонстрационные функции HTML

  • <form> и <fieldset> вместо <div>

  • добавлены <output> для каждого <fieldset>

• Также JavaScript предназначен для отображения сообщения, когда любая пара из <input> имеет .value, а другая - нет .

  • Сообщение: <output>Complete data input</output>

• Эта проверка псевдоформы запускается всякий раз, когда пользователь вводит данные в <input>, а затем клики (иначе "blur" событие). Вся эта объединенная цепочка действий является событием "change".

• Тег <form> зарегистрирован для события "change", поэтому, если какой-либо из <input> в пределах <form> - источник события (он же event.target - <input>, при котором пользователь запускает событие "change").

const form = document.forms[0];

form.onchange = reqData;

function reqData(event) {
  let origin = event.target;
  if (origin.tagName === 'INPUT') {
    const parent = origin.parentElement;
    const output = parent.querySelector('output');
    const inputs = [...parent.querySelectorAll('input')];
    let total = inputs.length;
    let count = 0;
    for (let input of inputs) {
      if (input.value) {
        count++;
      }
    }
    if (count < total && count > 0) {
      output.style.opacity = '1';
    } else {
      output.style.opacity = '0';
    }
  }
  return false;
}

output {
  opacity: 0;
  color: tomato
}

<form>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
</form>

Answer 3

Вы можете достичь этого простым способом

$('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>