# Step Validation

The Stepper enables you to set validation logic for each of its steps.

Based on that logic, a success or error icon will be rendered for previous steps, that is, for steps whose index is less than the index of the current step. You can render validation icons either in the step indicator or as a part of the step label, depending on the current Stepper configuration options.

> By default, the validation logic is executed only for previous steps.

## Setup

To enable the step validation, configure the [`isValid`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#isvalid) option of the steps that has to be validated. It accepts both `boolean` and [`StepPredicateFn`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppredicatefn) parameters.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/validation/basic/source.txt)

## Validation Logic

The Stepper enables you to specify custom validation logic for each step by providing a [`StepPredicateFn`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppredicatefn) function for the [`isValid`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#isvalid) property of the step. This functionality is useful for scenarios where the validity of the step has to correspond to the state of some external content, for example, a form.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/validation/function/source.txt)

## Controlling the Validation

By default, the Stepper validates only previous steps (whose index is less than the index of the current step). You can override this behavior by using the [`validate`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#validate) option of the steps. It accepts both `boolean` and [`StepPredicateFn`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppredicatefn) parameters and allows you to have full control over which steps to validate and when.

If provided, a step will only be validated when its [`validate`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#validate) option is `true`. This allows the handling of specific scenarios such as validating certain steps only when a specific step is reached, validating all steps when the last step is reached, or even forcing the validation for future steps (that were previously visited by the user).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/validation/controlling/source.txt)

## Triggering the Validation

As an addition to the [`validate`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#validate) option of the steps, the Stepper allows you to manually trigger the validation of the steps at any moment. To achieve this, invoke the [`validateSteps`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppercomponent#validateSteps) method of the component.

> Steps that have their [`validate`](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#validate) property set to `false`, will not be validated.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/validation/manual/source.txt)

## Custom Validation Icons

The Stepper allows you to customize the rendered validation icons. To achieve this, specify the [`successSVGIcon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppercomponent#successsvgicon) and [`errorSVGIcon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppercomponent#errorsvgicon) properties of the Stepper, and provide the CSS classes that have to be applied to the icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/validation/customicons/source.txt)

## Suggested Links

* [API Reference of the Stepper](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppercomponent)
* [Angular Stepper](https://www.telerik.com/kendo-angular-ui/stepper)