javascript - 2 个不需要但都必须填​​写的输入字段？

Question

我有 2 个输入字段:

<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>

它们不是必需的，但如果其中有数据，那么我需要将它们都填写......

执行此操作的最佳方法是在填写一个输入时在两个输入的末尾添加一个 required 吗？

请记住，我已经在使用 JS 动态添加更多类似的行，项目/数量为 2、3、4 等...

我不确定该怎么做。

---

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

1) 填充后，找到“item”和“amount”的 ID - 例如...custom-item-1 和 custom-amount-1

2) 将“required”添加到带有 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);

---

编辑:

最终代码:

  // 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>

Answer 1

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

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
    }
}

一些解释:!! turns stuff into boolean values .因此，for 循环实质上是遍历所有“自定义项目”字段，直到找到一个不存在的字段。

处理 if 语句中的错误情况的一些选项:

• 在字段旁边添加错误消息
• 禁用提交按钮(尽管这可能是有问题的用户界面设计)
• Somehow防止实际提交代码运行