Assignment02-Multi-Step-Form-Wizard/script.js

// const form = document.getElementById("personal-details-form"); // Main form element

// const inputs = form.getElementsByTagName("input"); // All the input elements in the form

// var currentForm = form.querySelectorAll("[data-form]") // Get the current form selected

// var currentStep = parseInt(currentForm[0].getAttribute("data-form")); // Get the current step
// console.log(currentForm[0].getAttribute("data-form"));

// function incrementStep() {
//     // Check if current form is filled
//     console.log(currentForm);

//     currentForm[currentStep].classList.remove("active");
//     currentStep++;
//     currentForm[currentStep].classList.add("active");
//     console.log(currentForm[currentStep].getAttribute("data-form"));
// }

// function decrementStep() {
//     currentForm[currentStep].classList.remove("active");
//     currentStep--;
//     currentForm[currentStep].classList.add("active");
//     console.log(currentForm[currentStep].getAttribute("data-form"));
// }

const forms = document.querySelectorAll("[data-form]");
var currentStep = 0;
var currentForm = forms[currentStep];

function incrementStep() {
  // Check if current form is filled

  let inputs = currentForm.getElementsByTagName("input");
  for (const input of inputs) {
    if (!input.checkValidity()) {
      input.reportValidity();
      return;
    }
  }

  //  Changing the visiblity of the form
  currentForm.classList.remove("active");
  currentStep++;
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}

function decrementStep() {
  //  Changing the visiblity of the form

  currentForm.classList.remove("active");
  currentStep--;
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}