Kendo UI for jQuery Wizard Overview

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.

You can find additional information on how to use the Kendo UI Wizard in this section of the product documentation. Here you can see the API provided by the widget.