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