Question 188614 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to stop tabs when they have empty elements?

How to make the tabs stop when there are empty fields that prevent the advance of the tabs
Once the fields that by the way have required are filled in, but it doesn’t work for me, the tabs don’t stop
If I have empty fields in step 1, prevent it from being able to give next and get to step 2
If I have in step 2, even if it is an empty input, it will prevent me from reaching step 3
I don’t know how to do what I’m asking
On the same page I have several sections. called one, two and three
prevent the advance of the next button when there are empty fields
the button should be disabled once all the fields are filled enable it and do the same in tab 2 that is disabled and when all the fields are filled enable it to go to section 3

summary of what to do
1- show the message: "the field is required" in each input

2- the next button must be disabled

3- the button must be activated when the last input is finished writing (I think it is the onblur event)

class TabbedContent {
          constructor() {
            this.tabs = document.querySelectorAll(".nav li");
            this.sections = document.querySelectorAll(".section");
            this.nextButton = document.querySelector("#nextBtn");
            this.prevButton = document.querySelector("#prevBtn");
            this.current = 0;
          }
    
          toggleTabs() {
            this.tabs.forEach(function(tab) {
              tab.classList.remove('active');
            });
            this.tabs[this.current].classList.add("active");
          }
    
          toggleSections() {
            this.sections.forEach(function(section) {
              section.classList.remove('active');
            });
            this.sections[this.current].classList.add("active");
          }
    
          togglePrev() {
            const method = this.current == 0 ? 'add' : 'remove';
            this.prevButton.classList[method]("disable");
          }
    
          toggleNext() {
            const method = this.current == this.tabs.length - 1 ? 'add' : 'remove';
            this.nextButton.classList[method]("disable");
          }
    
          goNext() {
            if (this.current < this.tabs.length - 1) {
              this.current++
            }
            this.toggleTabs();
            this.toggleSections();
            this.toggleNext();
            this.togglePrev();
          }
    
          goPrev() {
            if (this.current > 0) {
              this.current--
            }
            this.toggleTabs();
            this.toggleSections();
            this.toggleNext();
            this.togglePrev();
          }
    
        }
    
        const tabbedContent = new TabbedContent();
.container {
          max-width: 600px;
          margin: 0 auto;
          text-align: center;
        }
    
        .section {
          display: none;
        }
    
        .section.active {
          display: block;
        }
    
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
        }
    
        ul li {
          background: #ccc;
          padding: 10px 15px;
          margin-left: 6px;
          border-radius: 50%;
          cursor: pointer;
          opacity: .5;
        }
    
        ul li.active {
          opacity: 1 !important;
        }
    
        .next,
        .previous {
          padding: 15px 10px;
          border-radius: 6px;
          background: deepskyblue;
          color: white;
          border: 0;
          outline: none;
          cursor: pointer;
          width: 100px;
        }
    
        .next.disable,
        .previous.disable {
          cursor: none;
          opacity: .5;
        }
 <div class="container">
          <ul class="nav">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
          </ul>
    
    
          <section class="section section-one active">
            <input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">
<input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">

<input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">

<input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">

          </section>
          <section class="section section-two">
         <input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">
<input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">

          </section>
          <section class="section section-three">
            <h2>section 3</h2>
          </section>
    
    
          <button class="previous disable" id="prevBtn" onclick="tabbedContent.goPrev()">Previous</button>
          <button class="next" id="nextBtn" onclick="tabbedContent.goNext()">Next</button>
        </div>
Tags:

2

Answers


  1. 0

    Your current implementation of the TabbedContent class does not check if all the input fields in the current section have been filled out before advancing to the next section.

    You can add a method to your TabbedContent class that checks if all the required inputs in the current section have been filled. If they have, it will enable the next button; if they haven’t, it will disable it.

    Here is an example of how you could implement such a method:

    class TabbedContent {
    // ... existing methods ...

    validateInputs() {
        const inputs = this.sections[this.current].querySelectorAll('input[required]');
        let allFilled = true;
        
        inputs.forEach(input => {
            if (!input.value) {
                allFilled = false;
            }
        });
        
        if (allFilled) {
            this.nextButton.classList.remove("disable");
        } else {
            this.nextButton.classList.add("disable");
        }
    }

    goNext() {
        if (this.current < this.tabs.length - 1 && !this.nextButton.classList.contains("disable")) {
            this.current++
        }
        this.toggleTabs();
        this.toggleSections();
        this.toggleNext();
        this.togglePrev();
        this.validateInputs(); // validate inputs after moving to the next tab
    }

    goPrev() {
        // ... existing code ...
        this.validateInputs(); // validate inputs after moving to the previous tab
    }
}

const tabbedContent = new TabbedContent();
tabbedContent.validateInputs(); // validate inputs on page load

    In the validateInputs method, it is getting all the required input fields in the current section and checking if they have a value. If all the required inputs are filled, it removes the "disable" class from the next button; if not all required inputs are filled, it adds the "disable" class to the next button.

    This will disable the "Next" button as long as there are unfilled required inputs in the current section, which should achieve the behavior you’re looking for. When a user fills out all the required inputs in the current section, the "Next" button will become enabled, allowing them to proceed to the next section. When they move to a new section (either next or previous), it will check the required inputs in the new section and disable or enable the "Next" button as appropriate.

    You will also need to add an event listener to each input field to call validateInputs whenever the input’s value changes:

    class TabbedContent {
    constructor() {
        // ... existing code ...

        const inputs = document.querySelectorAll('input[required]');
        inputs.forEach(input => {
            input.addEventListener('input', () => this.validateInputs());
        });
    }

    // ... existing methods ...
}

    This will ensure that the "Next" button is enabled or disabled in real-time as the user fills out the required inputs.

    Login or Signup to reply.
  2. 0

    You can add one more method to TabbedContent class which gonna tell you whether you should go next or not as:

    CODESANDBOX

      isAllFieldsFilled() {
    const current = this.current;
    const allInputs = [...this.sections];
    const currentSection = allInputs?.[current];
    let shouldGoNext = true;
    if (currentSection) {
      const allInputs = currentSection.querySelectorAll("input");
      for (let input of allInputs) {
        const value = input.value;
        if (!value) return false;
      }
    }
    return shouldGoNext;
  }

    and you have to use it in goNext method as:

      goNext() {
    if (this.isAllFieldsFilled()) {
      if (this.current < this.tabs.length - 1) {
        this.current++;
      }
      this.toggleTabs();
      this.toggleSections();
      this.toggleNext();
      this.togglePrev();
    }
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search