How to disable a tab until form elements are complete?-CodePudding

In my example below, I've managed to disable the next button until the form field (Case Title) has content in it. I don't quite understand how to disable the next tab until that form field is complete.

How can I disable the other tabs until the form field in the first tab is completed?

$(".btnNext").click(function () {
  $(".nav-tabs > .active").next("li").find("a").trigger("click");
});

$(".btnPrevious").click(function () {
  $(".nav-tabs > .active").prev("li").find("a").trigger("click");
});

let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");

caseTitle.addEventListener("keyup", () => {
  caseTitleNext.removeAttribute("disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>



<div >
  <ul >
    <li >
      <a href="#tab1" data-toggle="tab">Case Creation <i ></i></a>
    </li>
    <li>
      <a href="#tab2" data-toggle="tab">Attributes <i ></i></a>
    </li>
    <li>
      <a href="#tab3" data-toggle="tab">Individual Involvement <i ></i></a>
    </li>
    <li>
      <a href="#tab4" data-toggle="tab">Agency Involvement <i ></i></a>
    </li>
    <li>
      <a href="#tab5" data-toggle="tab">Review Information <i ></i></a>
    </li>
  </ul>
  <form id="createCase" name="createCase">
    <div >
      <div >
        <div >
          <div  id="tab1">
            <div >
              <div >
                <div >
                  <label for="caseTitle" >Case Title</label>
                  <input type="text"  id="caseTitle">
                </div>
              </div>
              <div >
                <div >
                  <label>Case Number</label>
                  <input type="text" placeholder="Enter case number" >
                </div>
              </div>
            </div>
            <div >
              <button type="button" >Cancel</button>
              <button type="button"  disabled="disabled">Next</button>
            </div>
          </div>
          <div  id="tab2">
            <h2>Tab 2 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Skip</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab3">
            <h2>Tab 3 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab4">
            <h2>Tab 4 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab5">
            <h2>Tab 5 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="submit" >Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

CodePudding user response：

Base on the Bootstrap docs, you can disable tabs by setting <li > and removing the tab from data-toggle. I wrote a setTabDisabled(tabElement) method for quick toggling

Here is a working example

$(".btnNext").click(function () {
  $(".nav-tabs > .active").next("li").find("a").trigger("click");
});

$(".btnPrevious").click(function () {
  $(".nav-tabs > .active").prev("li").find("a").trigger("click");
});

let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");


const setTabDisabled = (tabEl, isDisabled = true) => {
  tabEl.setAttribute("class", isDisabled ? "disabled" : "");
  const tabLink = tabEl.querySelector('a');
  tabLink.setAttribute("data-toggle", isDisabled ? "" : "tab");  
};

const setNonActiveTabsDisabled = (isDisabled = true) => {
  document.querySelectorAll('.nav.nav-tabs li:not(.active)').forEach(element => {
    setTabDisabled(element, isDisabled);
    });
};

caseTitle.addEventListener("keyup", () => {
  if(caseTitle.value.trim().length){
    caseTitleNext.removeAttribute("disabled");
    setNonActiveTabsDisabled(false);
  }
  else{
    caseTitleNext.setAttribute("disabled","");
    setNonActiveTabsDisabled(true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>



<div >
  <ul >
    <li >
      <a href="#tab1" data-toggle="tab">Case Creation <i ></i></a>
    </li>
    <li >
      <a href="#tab2" data-toggle="">Attributes <i ></i></a>
    </li>
    <li >
      <a href="#tab3" data-toggle="">Individual Involvement <i ></i></a>
    </li>
    <li >
      <a href="#tab4" data-toggle="">Agency Involvement <i ></i></a>
    </li>
    <li >
      <a href="#tab5" data-toggle="">Review Information <i ></i></a>
    </li>
  </ul>
  <form id="createCase" name="createCase">
    <div >
      <div >
        <div >
          <div  id="tab1">
            <div >
              <div >
                <div >
                  <label for="caseTitle" >Case Title</label>
                  <input type="text"  id="caseTitle">
                </div>
              </div>
              <div >
                <div >
                  <label>Case Number</label>
                  <input type="text" placeholder="Enter case number" >
                </div>
              </div>
            </div>
            <div >
              <button type="button" >Cancel</button>
              <button type="button"  disabled="disabled">Next</button>
            </div>
          </div>
          <div  id="tab2">
            <h2>Tab 2 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Skip</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab3">
            <h2>Tab 3 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab4">
            <h2>Tab 4 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="button" >Next</button>
            </div>
          </div>
          <div  id="tab5">
            <h2>Tab 5 Content</h2>
            <div >
              <button type="button" >Previous</button>
              <button type="submit" >Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>