Hi Marcos,

Indeed, the ideas you have provided make for a valid feature request. And thus, I would like to thank you for additionally sharing your thoughts and specific scenario in which the introduction of such functionality is applicable.

I have conducted further research on any potential alternatives that could achieve the desired outcome. And after further exploration, I stumbled upon the following approach:

• On the server-side, create a dynamic dictionary value which will be used to determine the steps where the errors occurred:
  

[HttpPost]
public IActionResult Index({custom model} model)
{
    var stepErrors = new List<int>(); // Variable for storing the step indices.

    if ({custom evalutation logic})
    {

        stepErrors.Add(2);


        ModelState.AddModelError({custom field},{custom message});
    }

    stepErrors = stepErrors.Distinct().ToList(); // Obtain only the distinct steps if multiple steps of the same kind are added.
    if (!ModelState.IsValid)
    {
        ViewData["ErrorSteps"] = stepErrors; // Create the ViewData dictionary and add the step errors.
        return View(model);
    }
    return Ok("Success");
}

• Create a JavaScript flag variable that will hold the serialized value of the ViewData dictionary:
  

var errorSteps = @Json.Serialize(ViewData["ErrorSteps"]);

• Subscribe to the document.ready() method and inside:
  • Get the client-side reference of both the Wizard and Stepper widgets.
  • Traverse through each of the added indices of the flag variable.
  • Filter out the step elements that match the error indices.
  • Instantiate a badge widget for the given step.

     $(document).ready(function(){
          var wizard = $("#wizard").data("kendoWizard"); // Obtain the Wizard reference.
          var stepper = $(wizard.stepper.element).data("kendoStepper"); // Gather the stepper reference.
          var steps = stepper.steps(); // Get the step elements.
  
          errorSteps.forEach(stepIndex => { // Traverse through each of the error step indices from the flag variable.
              var step = steps.filter(step => { // Filter out the matching step.
                  return step.options.index + 1 == stepIndex;
              })
  
              $(step[0].element).find(".k-step-link").css("overflow", "visible"); // Change the overflow style in order to display the to-be-created badge accordingly.
              var stepIndicator = $(step[0].element).find(".k-step-indicator"); // Obtain the step indicator.
              stepIndicator.append("<span class='step-badge'></span>") // Append a span container for the badge.
  
              $('.step-badge').kendoBadge({ // Instantiate a badge component for each of the steps that have errors.
                  themeColor: 'error',
                  icon: 'exclamation-circle',
                  size: 'small',
                  align: 'top end',
                  position: 'edge',
                  rounded: 'large'
              })
          })
      })

The aforementioned result would then produce an identical result as the following:

In addition, if the badges need to be persistent upon step navigation, the same layer of logic can also be implemented by wiring to the Activate event.

For your convenience and that of the community, I am also attaching a runnable sample that tackles such an approach. The behavior within can be reproduced by:

• Typing less than 3 letters in the "Username" field.

• Clicking on the "Done" button to instantiate the Wizard form's submission.

It is important to mention that this is generally considered a customary approach and any further enhancements or modifications would fall within the developer's hands for further implementation.

I hope this helps.

Kind Regards,
Alexander
Progress Telerik