множественная проверка формы ввода js

Question

у меня есть пять пар ввода имени и цены для моих продуктов, и я хочу, если я введу тег имени, я должен также ввести цену: я пишу этот код для него, и он работает

function empty() {
var p21 , pr21 , p22 , pr22, p23 , pr23 , p24 , pr24 , p25 , pr25
p21 = document.getElementById("pname21").value;
p22 = document.getElementById("pname22").value;
p23 = document.getElementById("pname23").value;
p24 = document.getElementById("pname24").value;
p25 = document.getElementById("pname25").value;
pr21 = document.getElementById("price21").value;
pr22 = document.getElementById("price22").value;
pr23 = document.getElementById("price23").value;
pr24 = document.getElementById("price24").value;
pr25 = document.getElementById("price25").value;
if (p21 =="" && p22 =="" && p23 =="" && p24 =="" && p25 ==""){alert("enter a product");return false;};
if ((p21 !== ""  && pr21 =="") || (p21=="" && pr21 !=="")){alert("enter product with price");return false;};
if ((p22 !== ""  && pr22 =="") || (p22=="" && pr22 !=="")){alert("enter product with price");return false;};
if ((p23 !== ""  && pr23 =="") || (p23=="" && pr23 !=="")){alert("enter product with price");return false;};
if ((p24 !== ""  && pr24 =="") || (p24=="" && pr24 !=="")){alert("enter product with price");return false;};
if ((p25 !== ""  && pr25 =="") || (p25=="" && pr25 !=="")){alert("enter product with price");return false;};
} 

но яЯ хочу использовать цикл from и попытаться использовать что-то вроде этого:

    var k =2;
    function empty() {
    for (var l = 1; l <= 5; l++) {
    var 'p'+k+l = document.getElementById("pname"+k+l).value;
    .....
    }

, и это, очевидно, неправильно.Я читаю о массивах, но не недооцениваю, что мне делать с этим.

и это моя форма:

<form>
        <?php for($i=1; $i<=5 ; $i++){?>
    <input type="text" id="<?php echo 'pname'.$i ;?>" name="<?php echo 'pname'.$i ;?>" >
    <input type="number" id="<?php echo 'price'.$i ;?>" name="<?php echo 'price'.$i ;?>">
        <?php } ?>
    <button type="submit" onClick="return empty();">submit</button>
</form>

Answer 1

Попробуйте определить все id s в массиве, связывающем селектор продукта и ценовой селектор, затем выполните цикл по массиву:

const selectors = [
  ['p21', 'pr21'],
  ['p22', 'pr22'],
  ['p23', 'pr23'],
  ['p24', 'pr24'],
  ['p25', 'pr25'],
];
if (selectors.every(([name]) => document.getElementById(name).value.length === 0)) {
  return false;
}
if (selectors.some(([nameSel, priceSel]) => {
  const nameLen = document.getElementById(nameSel).value.length;
  const priceLen = document.getElementById(priceSel).value.length;
  if (nameLen === 0 && priceLen !== 0) return true;
  if (nameLen !== 0 && priceLen === 0) return true;
  return false; // OK
})) {
  alert("enter product with price");
  return false;
}