Validating Data in a Wizard Step and Preventing Next Step

[Matthew]

I have a multistep wizard.  I need to validate some data inside one of the steps.  If the validation fails I need to prevent the wizard from moving on to the next step. 

Right now I'm doing this in the Next button click event of the step I'm validating: 

var validator = $("#myForm").kendoValidator().data("kendoValidator");
var valState = validator.validate();
var wizard = $("#wizard").data("kendoWizard");

if(valState == true) {
   //do some stuff
}

//valState was not true, so do this -- this is where I want to stop the step from moving on
wizard.select(4) //4 is the index of the current step

But this doesn't seem to work.  The stepper always moves on to the next step, regardless of what step I tell the wizard to select.  The validations all fire and if you go back to this step, all the error messages show.  But I want the error messages to show and the Next button not to go to next, and that doesn't seem to be working.  How do I make this work?

[Anton Mironov]

Hello Matthew,

Thank you for the code snippet and details provided.

In order to achieve the desired behavior, I would recommend using the form implementation of the Wizard from the following demo:

• https://demos.telerik.com/aspnet-mvc/wizard/form

In the demo above, delete the Username field and click on the Net button in the Wizard. The resulting behavior is the expected one.

Furthermore, I prepared a sample project where the Username in the form is empty by default. The validation implemented is working out of the box. 

Feel free to use the same validation and observe the result.

Kind Regards,
Anton Mironov
Progress Telerik

[Matthew]

Hi, Anton,

Thanks for your response and the information.  Unfortunately, using a form is not possible in my situation.  I reviewed the page you sent me and it looks like if I define form objects as part of the stepper, the stepper automatically builds out a form for that step.  In my case, each step loads a partial view that has a collection of form objects on it: a boolean value that needs to be set, and a Kendo file upload that needs to be checked before the stepper moves on.

Looking at what you sent me, under the Loading Content With Ajax section, I see that some validation of the fields of the stepper are being performed in the Done event.  This looks closer to what I want to do.  However, the requirement from the customer is that this step needs to be validated before moving on to the next step, and not all steps need to be validated.

Is there a way to accomplish this?  Right now I'm trying to do that check in the Next event but it doesn't seem to work.

[Matthew]

Nevermind.  I eventually figured this one out after fiddling with some of the things I'd seen on the demo page.  The way I solved it was:

1) Write a handler for the Select event of the Wizard.

2)In the onSelect event, check e.step.options.index to see if it's the step I need to run validations on.

3)If it is, run the validations and if the result is false, use e.preventDefault() and then e.sender.stepper.steps()[x].setValid(false)

The part that wasn't clear from the documentation was what event was being passed between the Next and onSelect steps.  I had tried e.preventDefault in the Next click handler but that didn't do the trick.

Thanks for your help.

[Anton Mironov]

Hi Matthew,

Thank you for sharing the approach with the community.

It sounds great!

Let me know if further assistance or information is needed.


Best Regards,
Anton Mironov