Javascript 2个非'的输入字段；t必须填写，但两者都必须填写？

我有两个输入字段：

<div class="row">
    <div class="col-1-2"><input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1"></div>
    <div class="col-1-2"><input type="number" placeholder="Amount 1" name="custom_amount_1" id="custom-amount-1"></div>
</div>

他们不是必需的，但如果有一个数据，那么我需要他们都填写

最好的方法是在填写一个输入时，在两个输入的末尾都添加一个必需的

请记住，我已经在使用JS动态添加更多的行，如项目/金额2、3、4等

我不知道该怎么办

---

我认为工作流程应该是这样的：

1） 填写后，查找“项目”和“金额”的ID，例如。。。custom-item-1和custom-amount-1

2） 将“必需”添加到id为

---

下面是我用来动态添加行的代码，以防有用：

  // add custom fields - add fields upon pressing button
  var iCustom = 2; // starts at 2 because 1 is already present
  function addCustomFields() {
    var newRow = document.createElement('div');
    newRow.className = 'row';
    newRow.innerHTML = '<div class="col-1-2"><input type="text" placeholder="Item ' + iCustom + '" name="custom_item_' + iCustom + '" id="custom-item-' + iCustom + '"></div><div class="col-1-2"><input type="number" placeholder="Amount ' + iCustom + '" name="custom_amount_' + iCustom + '" id="custom-amount-' + iCustom + '"></div>';
    document.getElementById('section-add-custom-fields').appendChild(newRow);
    iCustom++;
  }
  document.getElementById('add-custom-fields').addEventListener('click', addCustomFields);

//添加自定义字段-按按钮后添加字段
var iCustom=2；//从2开始，因为1已存在
函数addCustomFields（）{
var newRow=document.createElement（'div'）；
newRow.className='row'；
newRow.innerHTML=''；
document.getElementById（'section-add-custom-fields'）.appendChild（newRow）；
iCustom++；
}
document.getElementById（'add-custom-fields'）。addEventListener（'click'，addCustomFields'）；

---

编辑：

最终代码：

  // requires both inputs to be filled
  document.getElementById('form-button-submit').addEventListener('click', function() {
    for (var i = 1; !!document.getElementById("custom-item-"+i); i++) {
    var itemEntered = !!document.getElementById("custom-item-"+i).value,
        amountEntered = !!document.getElementById("custom-amount-"+i).value;
      if(itemEntered != amountEntered) {
        document.getElementById("custom-item-"+i).required = true
        document.getElementById("custom-amount-"+i).required = true
      }
    }
  });

  <button type="submit" id="form-button-submit">Continue</button>

//需要同时填写两个输入
document.getElementById（'form-button-submit'）。addEventListener（'click'，function（））{
对于（var i=1；！！document.getElementById（“自定义项-”+i）；i++）{
var itemcentered=！！document.getElementById（“自定义项-”+i）.value，
amountEntered=！！document.getElementById（“自定义金额-”+i）.value；
如果（itemEntered！=amountEntered）{
document.getElementById（“自定义项-”+i）.required=true
document.getElementById（“自定义金额-”+i）.required=true
}
}
});
继续

我只是将此验证代码放在您拥有的任何提交按钮的事件侦听器中：

for(var i = 1; !!document.getElementById("custom-item-"+i); i++) {
    var itemEntered = !!document.getElementById("custom-item-"+i).value,
        amountEntered = !!document.getElementById("custom-amount-"+i).value;
    if(itemEntered != amountEntered) {

            // One was entered, but both weren't filled out
            // so handle that situation accordingly
    }
}

一点解释：

。因此，for循环实质上在所有“自定义项”字段上循环，直到找到一个不存在的字段为止

有关如何处理if语句中的错误情况的一些选项：


在字段旁边添加错误消息
禁用“提交”按钮（尽管这可能是有问题的用户界面设计）
阻止实际提交代码运行