Wizard - validation on every step

[AM]

What is the best way to validate input on each wizard step before allowing user to go to next step? We are loading step content with ajax and not using forms inside the steps.

[AM]

Came up with this syntax which works to prevent the user from advancing to next step if there are validation errors.

 function onSelect(e) {         
        if (!e.sender.currentStep.element.kendoValidator().data("kendoValidator").validate())
            e.preventDefault();    
    };

[Alexander]

Hi Anya,

The automatic validation in the Wizard will only be present for Steps that have their Form() defined using the .Form() configuration method of the Wizard. When loading Step content from a remote source the Wizard does not know whether it contains Form or not and what type of validation it involves. Having that said, you will need no manually execute validation upon Step navigation.

Thus, you can instantiate a validator on the external content of the step (highlighted in green).

That being said, you indeed are on the right track as the Select event can be handled in order to check the validity of the desired fields using the Kendo Validator.

Alternatively, you could also utilize the .validateInput() method against a given input as well. Here is an example:

Step Content:

<div class="d-flex flex-row customContainer">
           <label asp-for="UserName"></label>
           <input asp-for="UserName" validationMessage="Enter {0}"/>
</div>

Select Handler:

<script>
    function onSelect(e){
        var container = e.sender.currentStep.element; // Get the current step's container element.
        $(container).kendoValidator(); // Instantiate a validator for the container element.
        var validator = $(container).kendoValidator().data("kendoValidator"); // Get the validator's reference.
      	if (!validator.validateInput($("#UserName"))) { // Validate a given input element.
          e.preventDefault(); // Prevent the wizard's navigation.
        }
    }
</script>

I hope the above helps. If you have any other questions, please do not hesitate to contact us.

Kind Regards,
Alexander
Progress Telerik