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

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

function checkValidity() {
  clearErrors();
  let isValid = true;

  if (currentStep === 0) {
    // Full Name Validation
    const fullName = document.getElementById("full_name");
    if (!fullName.value.trim()) {
      showError(fullName, "Full name is required");
      isValid = false;
    } else if (!fullName.value.match(/^[A-Za-z]+(?: [A-Za-z]+)*$/)) {
      showError(fullName, "Name should only contain letters and spaces");
      isValid = false;
    } else if (fullName.value.length < 3) {
      showError(fullName, "Name should be at least 3 characters long");
      isValid = false;
    }

    // Email Validation
    const email = document.getElementById("email");
    if (!email.value.trim()) {
      showError(email, "Email is required");
      isValid = false;
    } else if (!email.value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      showError(email, "Please enter a valid email address");
      isValid = false;
    }

    // Phone Validation
    const phone = document.getElementById("phone");
    if (!phone.value.trim()) {
      showError(phone, "Phone number is required");
      isValid = false;
    } else if (!phone.value.match(/^[0-9]{10}$/)) {
      showError(phone, "Phone number must be exactly 10 digits");
      isValid = false;
    }

    // Gender Validation
    const gender = document.querySelector('input[name="gender"]:checked');
    if (!gender) {
      showError(document.querySelector('input[name="gender"]').parentElement, "Please select your gender");
      isValid = false;
    }

    // Age Validation
    const age = document.getElementById("age");
    if (!age.value) {
      showError(age, "Age is required");
      isValid = false;
    } else if (age.value < 18) {
      showError(age, "You must be at least 18 years old");
      isValid = false;
    } else if (age.value > 100) {
      showError(age, "Age cannot be more than 100 years");
      isValid = false;
    }
  }

  if (currentStep === 1) {
    // Education Validation
    const education = document.getElementById("education");
    if (education.value === "none") {
      showError(education, "Please select your education level");
      isValid = false;
    }

    // Skills Validation
    const skills = document.querySelectorAll('input[name="skills"]:checked');
    if (skills.length === 0) {
      showError(document.querySelector('input[name="skills"]').parentElement, "Please select at least one skill");
      isValid = false;
    }

    // Experience Validation
    const experience = document.getElementById("experience");
    if (!experience.value) {
      showError(experience, "Experience is required");
      isValid = false;
    } else if (experience.value < 0) {
      showError(experience, "Experience cannot be negative");
      isValid = false;
    } else if (experience.value > 50) {
      showError(experience, "Experience cannot be more than 50 years");
      isValid = false;
    }

    // Current Role Validation
    const currentRole = document.getElementById("current-role");
    if (!currentRole.value.trim()) {
      showError(currentRole, "Current role is required");
      isValid = false;
    } else if (!currentRole.value.match(/^[A-Za-z]+(?: [A-Za-z]+)*$/)) {
      showError(currentRole, "Current role should contain only letters and spaces");
      isValid = false;
    }
  }

  return isValid;
}

function showError(element, message) {
  // Create error container
  const errorContainer = document.createElement("div");
  errorContainer.classList.add("error", "text-red-500", "text-sm", "mt-1");
  errorContainer.innerText = message;

  if (element.type === "radio" || element.type === "checkbox") {
    const container = element.closest("div");
    const lastLabel = container.querySelector("label:last-of-type");
    if (lastLabel.nextSibling) {
      container.insertBefore(errorContainer, lastLabel.nextSibling);
    } else {
      container.appendChild(errorContainer);
    }
  } else {
    if (element.nextSibling) {
      element.parentNode.insertBefore(errorContainer, element.nextSibling);
    } else {
      element.parentNode.appendChild(errorContainer);
    }
  }

  if (element.tagName === "INPUT" || element.tagName === "SELECT") {
    element.classList.add("border-red-500");
  }
}

function clearErrors() {
  document.querySelectorAll(".error").forEach(error => error.remove());
  
  document.querySelectorAll("input, select").forEach(element => {
    element.classList.remove("border-red-500");
  });
}

function updateReviewData() {
  try {
    data.fullName = document.getElementById("full_name").value;
    data.email = document.getElementById("email").value;
    data.phone = document.getElementById("phone").value;
    data.gender = document.querySelector('input[name="gender"]:checked')?.value || '';
    data.age = document.getElementById("age").value;
    data.education = document.getElementById("education").value;
    data.skills = Array.from(document.querySelectorAll('input[name="skills"]:checked'))
      .map(skill => skill.id);
    data.experience = document.getElementById("experience").value;
    data.currentRole = document.getElementById("current-role").value;

    // Update review section
    document.getElementById("full-name-review").innerText = data.fullName;
    document.getElementById("email-review").innerText = data.email;
    document.getElementById("phone-review").innerText = data.phone;
    document.getElementById("gender-review").innerText = data.gender;
    document.getElementById("age-review").innerText = data.age;
    document.getElementById("education-review").innerText = data.education;
    document.getElementById("skills-review").innerText = data.skills.join(", ");
    document.getElementById("experience-review").innerText = data.experience;
    document.getElementById("role-review").innerText = data.currentRole;
  } catch (error) {
    console.error("Error updating review data:", error);
  }
}

function incrementStep() {
  if (!checkValidity()) return;
  
  updateReviewData();
  currentForm.classList.remove("active");
  currentStep = Math.min(currentStep + 1, forms.length - 1);
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}

function decrementStep() {
  currentForm.classList.remove("active");
  currentStep = Math.max(currentStep - 1, 0);
  currentForm = forms[currentStep];
  currentForm.classList.add("active");
}

// Form submission handler
document.querySelector('button[type="submit"]').addEventListener("click", function(event) {
  event.preventDefault();
  
  window.localStorage.clear();
  window.localStorage.setItem("formData", JSON.stringify(data));
  
  window.alert("Form submitted successfully!");
  window.location.href = "/";
});