Tab in form input required

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