R1 2019 Release is here. See what's new!
Change Theme

SASS Themes

LESS Themes

SASS Theme Builder

Create new or customize SASS themes
Launch Theme Builder
Edit in Theme Builder

Overview

Description

The Kendo UI for jQuery Wizard lets you easily create multi-step processes and guide step-by-step users in applications.

In this demo, you can see the implementation of a simple registration process using the Wizard widget, that requests user input in detail in three steps: Registration Info, Personal, and Payment Details. Breaking up a process into stages will simplify user input tasks so that they will need to manage just one form at a time. At each step, you have a pre-configured built-in validation of the input data and a progress indicator showing the number of steps left towards achieving their final goal for the process.

Key Features of Wizard component:

  • Built-in Validation (If configured)
  • Integration with the Form component
  • Loading content using AJAX
  • Configuring the position of the component's stepper

The Wizard widget can be initialized both from a form and div DOM elements. When initialized from a form element, if the Wizard configuration contains form definitions, the forms inside the widget will be initialized from a div DOM element. In this scenario, the ‘novalidate’ attribute should be added to the form element from which the Wizard is initialized.

< form id="wizard" novalidate> < /form>

The ‘novalidate’ attribute is needed to prevent the duplication of the built-in form validation and the default browser validation. If a form inside the Wizard is not validated using the component’s configuration, there is no need to add the ‘novalidate’ attribute.

HTML5/JavaScript source

Also available for:

API Reference
  • index.html
  • Widget configuration

Support & learning resources

Wizard for other technologies