The Professional
Multi-Step Form Wizard

<!-- 1. Include CSS and JS -->
<link rel="stylesheet" href="css/wizard.css">
<script src="js/wizard.js"></script>

<!-- 2. Add data-wizard to your wrapper -->
<div id="myForm"
     data-wizard
     data-transition="slide"
     data-theme="ocean"
     data-auto-save="true">

  <!-- Header with progress -->
  <div class="wz-header">
    <div class="wz-progress"><div class="wz-progress-fill"></div></div>
    <div class="wz-nav"></div>
  </div>

  <!-- Steps -->
  <div class="wz-body"><div class="wz-steps">

    <div class="wz-step" data-label="Step 1" data-icon="👤">
      <div class="wz-field">
        <label class="wz-label">Name</label>
        <input class="wz-field__input" name="name"
               data-validate="required|minlen:2">
        <div class="wz-error"></div>
      </div>

      <!-- Conditional field -->
      <div data-show-if="type:==:business">
        <input class="wz-field__input" name="company">
      </div>
    </div>

    <div class="wz-step" data-label="Confirm" data-icon="✅">
      <div class="wz-summary"></div>
    </div>

  </div></div>

  <!-- Navigation buttons -->
  <div class="wz-footer">
    <button class="wz-btn wz-btn-prev" data-wz="prev">← Back</button>
    <button class="wz-btn wz-btn-next" data-wz="next">Continue →</button>
    <button class="wz-btn wz-btn-submit" data-wz="submit">✓ Submit</button>
  </div>
</div>

<!-- 3. Auto-initialized via data-wizard attribute -->
<!-- OR manually: -->
<script>
  const wz = new MultiStepWizard('myForm', {
    transition:   'slide',
    duration:     380,
    darkMode:     false,
    autoSave:     true,
    onStepChange: (step) => console.log('Step:', step),
    onComplete:   (data, files) => console.log(data, files),
  });
</script>

// Initialize manually with full options
const wz = new MultiStepWizard('myWizard', {
  transition:   'slide',    // slide | fade | scale | flip | zoom
  duration:     380,         // ms
  autoSave:     true,
  saveKey:      'my_custom_key',
  darkMode:     false,

  onStepChange: (stepIndex, stepEl) => {
    console.log('Now on step:', stepIndex);
  },

  onValidate: (stepIndex, stepEl, data) => {
    // Return false to block moving to next step
    if (stepIndex === 1 && data.age < 18) return false;
    return true;
  },

  onComplete: (data, files) => {
    console.log('Form data:', data);
    console.log('Uploaded files:', files);
  },
});

// ── Public API Methods ──────────────────────────
wz.next();              // Go to next step (validates first)
wz.prev();              // Go to previous step
wz.reset();             // Clear all data, return to step 1
wz.getData();           // → { name: 'John', email: '...' }
wz.getCurrentStep();    // → 2  (0-based index)
wz.getTotalSteps();     // → 4
wz.toggleDark();        // Toggle dark mode on/off
wz.setDark(true);       // Set dark mode explicitly
wz.destroy();           // Remove event listeners

// ── Listen via native custom event ──────────────
document.getElementById('myWizard')
  .addEventListener('wz:complete', (e) => {
    console.log(e.detail.data);
    console.log(e.detail.files);
  });

// ── Connect to a real backend ───────────────────
new MultiStepWizard('myWizard', {
  onComplete: async (data, files) => {
    const formData = new FormData();
    Object.entries(data).forEach(([k, v]) =>
      formData.append(k, v));

    const res = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });

    if (!res.ok) alert('Submission failed.');
  },
});

// Add data-validate to any input. Chain rules with |

<input data-validate="required">
<input data-validate="required|email">
<input data-validate="required|minlen:8|pattern:^[A-Za-z0-9]+$">
<input data-validate="match:password_field_id">
<input type="file" data-validate="filesize:5|filetype:pdf,doc">


// ── Available Rules ──────────────────────────────

required              // Field cannot be empty
email                 // Valid email format
phone                 // Valid phone number format
minlen:N              // e.g. minlen:8  — minimum N characters
maxlen:N              // e.g. maxlen:100 — maximum N characters
min:N                 // e.g. min:18  — minimum numeric value
max:N                 // e.g. max:120 — maximum numeric value
pattern:regex         // e.g. pattern:^[A-Z]+$ — custom regex
match:elementId      // e.g. match:password — must equal another field
url                   // Valid URL format
date                  // Valid date format
number                // Must be numeric
checked               // Checkbox must be checked
filesize:N            // e.g. filesize:5 — file must be under N MB
filetype:ext1,ext2    // e.g. filetype:pdf,jpg — restrict extensions


// ── Conditional Fields (data-show-if) ───────────

// Show only when account_type equals "business"
<div data-show-if="account_type:==:business">
  <input name="company_name">
</div>

// Supported operators: == != > < has
<div data-show-if="age:>:18">...</div>
<div data-show-if="role:has:admin">...</div>
<div data-show-if="plan:!=:free">...</div>

// Hidden fields are auto-cleared and skipped during
// validation — no extra JavaScript required.