i have problem with my code. I have simple check out form and i have two tabs, “tabs1” and “tabs2” with input and label inside each with required attribute(I need this). So the problem is that i cant submit a button until the all required field are filed. I just need that if one tab is filed with data that doesn’t need to fill another.
<form class="right">
<h1>Korpa</h1>
<div class="tabs">
<div class="tab-link active" onclick="openTab(event, 'fizickaLica')">Fizička lica</div>
<div class="tab-link" onclick="openTab(event, 'pravnaLica')">Pravna lica</div>
</div>
<div id="fizickaLica" class="tab active">
<div class="form" id="checkoutForm" method="post">
<!-- Form fields for fizickaLica -->
<button type="submit">Poruči</button>
</div>
</div>
<div id="pravnaLica" class="tab">
<div class="form" id="checkoutFormPravna" method="post">
<!-- Form fields for pravnaLica -->
<button type="submit">Poruči</button>
</div>
</div>
</div>
</form>
I try with cas and I have a display none when tab isn’t active like this
.tab {
display: none;
}
.tab.active {
display: block;
}
And have this Js code
document.addEventListener("DOMContentLoaded", function() {
var tabcontent = document.getElementsByClassName("tab");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById("fizickaLica").style.display = "block";
});
function openTab(event, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
document.getElementById(tabName).classList.add("active");
event.currentTarget.classList.add("active");
}