Tab Form Validation and State Management

Tab Form Validation and State Management

State Management

Use a single object for all form data:

const formData = {
  name: "",
  email: "",
  address: "",
  city: "",
  card: "",
};

Update on every input:

function updateField(name, value) {
  formData[name] = value;
}

This persists data across tabs because the object is not re-created.

Per-Step Validation

function validateStep(stepIndex) {
  const step = steps[stepIndex];
  for (const field of step.fields) {
    if (field.required && !formData[field.name]) {
      showError(`${field.label} is required`);
      return false;
    }
    if (field.type === "email" && formData[field.name]) {
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData[field.name])) {
        showError("Invalid email");
        return false;
      }
    }
  }
  return true;
}

Prevent Skipping Unvalidated Steps

function goToStep(step) {
  // validate all steps before the target
  for (let i = 0; i < step; i++) {
    if (!validateStep(i)) {
      currentStep = i; // jump to the first invalid step
      renderStep();
      return;
    }
  }
  currentStep = step;
  renderStep();
}

Progress Indicator

function updateProgress() {
  const progress = ((currentStep + 1) / steps.length) * 100;
  progressBar.style.width = progress + "%";
}

The Takeaway

State: single formData object, updated on every input. Validation: per-step, check required fields and format (email regex). Prevent skipping: validate all previous steps before jumping. Progress indicator: (currentStep + 1) / totalSteps * 100. This ensures data integrity and a good UX.