Html Question posted in
Some basic documentation can be found here.

Html – 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");
}
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    This happens because HTML form validation considers all required fields in the form, even those hidden with display: none.

    To solve this issue, you can modify your JavaScript to disable the required attribute on the fields in the inactive tab. By this, only the fields in the active tab will be validated.

    Try this javascript 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;

// Hide all tabs
tabcontent = document.getElementsByClassName("tab");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tabcontent[i].classList.remove("active");
    setRequiredFields(tabcontent[i], false);
}

// Remove active class 
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
}


var activeTab = document.getElementById(tabName);
activeTab.style.display = "block";
activeTab.classList.add("active");
setRequiredFields(activeTab, true);
event.currentTarget.classList.add("active");
}

// required attribute for fields in the active tab
function setRequiredFields(tab, isRequired) {
var inputs = tab.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
    if (isRequired) {
        inputs[i].setAttribute('required', 'required');
    } else {
        inputs[i].removeAttribute('required');
    }
   }
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search