Tab in form input required

Question

I have a problem with my code. I have a simple checkout form and I have two tabs, “tabs1” and “tabs2” with input and a label inside each with the required attribute(I need this). So the problem is that I can't submit a button until the all required fields are filed. I just need that if one tab is filed with data that doesn't need to fill another.

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

/*
I try with cas and I have a display none when tab isn't active like this */
.tab {
    display: none;
}

.tab.active {
    display: block;
}

<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>

Answer 1

Your approach is not quite correct. Let's take a look first at your HTML.

First you insert the methods inside the div container from each button, wich is incorrect due to method is an attibute reserved for form tag.

On second hand, you have 2 buttons with the type submit. This will make to no matter what thing you do you will submit the form.

If you need to submit one previous form before continue, i strongly recommend you to use two splitted form, first one with an preventDefault method and second one to perform the action you require with the javascript you need. Check this example code:

  <section class="right">
    <h1>Korpa</h1>
    <div class="tabs">
        <button class="tab-link active" onclick="openTab(event, 'fizickaLica')">Fizička lica</button>
        <button class="tab-link" onclick="openTab(event, 'pravnaLica')">Pravna lica</button>
    </div>
    <div id="fizickaLica" class="tab active">
        <form class="form" id="checkoutForm" method="post">
            <!-- Form fields for fizickaLica -->
          <button type="submit">Poruči 1</button>
        </form>
    </div>
    <div id="pravnaLica" class="tab">
        <form class="form" id="checkoutFormPravna" method="post">
            <!-- Form fields for pravnaLica -->
        <button type="submit">Poruči 2</button>
        </form>
    </div>
  </div>
</section>

JS:

    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('checkoutForm').addEventListener('submit', (e) => e.preventDefault())
    })

  function openTab(event, tabName) {
      const tabs = document.querySelectorAll('.tab').forEach(tab => tab.classList.toggle('active'))
  }

Here you can see i did a toggle between the active classes so you don't have to remove and add programately. Besides i remove the code you wrote to add the style inline when the document first loaded and broke the possibility to display and hide the elements

Use this code to improve yours and reach your goal