如何仅提交具有“display: flex”的输入字段

Question

想象我有输入，有些是可见的（

display: flex;

），有些则不可见（

display: none;

）。我可以使用 add

ClassList

和

display: flex;

来控制它们。

问题：即使当我将输入字段更改为弹性显示并且它们为空时，表单始终会提交。

我想要做什么：我想检查表单是否未提交，除非填充了活动输入（具有弹性显示的输入）。

HTML：

<div id="dvd" class="section dvd">
  <div class="input-wrapper dvd-attribute">
    <label for="" class="description">Please, Provide Disc Size(MB):</label>
    <input type="text" required name="size" class="mySize" id="size" />
  </div>
</div>
<div id="book" class="section book">
  <div class="input-wrapper book-attribute">
    <label for="" class="description">Please, Provide The Book Weight:</label>
    <input type="text" required name="weight" class="myWeight" id="weight" />
  </div>
</div>
<div id="furniture" class="section furniture">
  <div class="furniture-attribute">
    <p class="askDimensions">Please, Provide Dimensions:</p>
    <div class="input-wrapper">
      <label for="">Height: </label>
      <input type="text" required name="height" class="myHeight" id="height" />
    </div>
    <div class="input-wrapper">
      <label for="">Width: </label>
      <input type="text" required name="width" class="myWidth" id="width" />
    </div>
    <div class="input-wrapper">
      <label for="">Length: </label>
      <input type="text" required name="length" class="myLength" id="length" />
    </div>
  </div>
</div>

萨斯：

.section {
  align-items: center;
  width: 60%;
  height: 20vh;
  border: solid 2px;
  max-width: 100%;
  margin-bottom: 2rem;
  padding: 0 30px;
  display: none;

  .input-wrapper {
    margin: 0;
  }
}

.furniture {
  height: unset;
  .askDimensions {
    padding: 20px 0 50px;
    font-weight: 400;
  }
  .input-wrapper {
    margin-bottom: 1.5rem;
  }
}
.active {
  display: flex;
}

JS：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.mySwitcher').addEventListener('input', (e) => {
    let selected = e.target;
    if (selected.value.toLowerCase() == 'dvd') {
      remove();
      document.getElementById('dvd').classList.add('active');
    }
    if (selected.value.toLowerCase() == 'book') {
      remove();
      document.getElementById('book').classList.add('active');
    }
    if (selected.value.toLowerCase() == 'furniture') {
      remove();
      document.getElementById('furniture').classList.add('active');
    }
  });
});

function remove() {
  document.querySelectorAll('.section, .section input').forEach((tag) => {
    tag.value = ' ';
    tag.classList.remove('active');
  });
}

Answer 1

这是检查输入（任何元素）是否显示为块的一种方法，然后您可以根据 javascript 中的显示属性执行任何特定任务

let allInputs = document.querySelector('input')
  allInputs.forEach(input=>{
    console.log(input.style.display);
  })