How to submit only inputs field that have disapaly: flex

Sorry if I formed the question in a wrong way, Imagine that I have inputs, some are visible(display:none) and some are not(display:flex). I can control between them using add ClassList with (display:flex).

The problem: The form is always submitted even though when I have the input fields changed to flex display and they are empty.

What I want to do: I want to check that the form is not submitted unless the active inputs (inputs with flex display) are filled.

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>

SASS:

.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");

}); }