Multi-Step Form

Break long forms into steps with jQuery controlling step visibility and a progress indicator.

Example

const $steps = $(".step");
let current = 0;
function showStep(n) {
  $steps.hide().eq(n).show();
  $("#progress").css("width", ((n + 1) / $steps.length * 100) + "%");
  $("#step-label").text(`Step ${n+1} of ${$steps.length}`);
}
$(".next-step").on("click", function() {
  const $current = $steps.eq(current);
  const isValid = $current.find("[required]").toArray().every(el => el.checkValidity());
  if (!isValid) { $current.find("input:invalid").first().focus(); return; }
  if (current < $steps.length - 1) showStep(++current);
});
$(".prev-step").on("click", () => { if (current > 0) showStep(--current); });
showStep(0);

JAVASCRIPT

Full Editor

Pro Tip

Validate each step before advancing — do not wait for the final submit to surface all errors.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned