Validator.Validate() on a form in a Wizard shows true always

[Vasudha]

Summary 

Struggling with this issue for weeks now. Please need help! 

Goal - Stop the wizard from going to next step when there is a custom validation

Issue : The custom validation "Min age has to be 16 years " shows up on Validation blur , but does not stop the propagation to the next step.

validator.validate() comes up as true in both form and div approach

 

First approach

1. Addded a kendo wizard with a  .Tag("div") tag so that 4 steps in there show up as individual forms

@(
    Html.Kendo().Wizard()
    .Name("LicenseWizard")
    .Tag("form")
    .Steps(s =>
    {

        s.Add<WizardViewModel>()
        .Title("County")
        .ClassName("CountyClass")
       .Form(f => f
        .Name("FormCounty")
        .FormData(Model)

... There are 4 steps in total

 

2. Used this in the Onselect step method 

           

function onSelect(e) {

    // Get the current step's index
    var stepIndex = e.step.options.index;

    // Get the current step's container element
    var container = e.sender.currentStep.element;

    if (stepIndex < currentStep) {
        e.preventDefault();
    }
    else {

        // Validate Party One
        if (stepIndex == 2) {

            var form = $("#LicenseWizard-1").find('form');

             var validator = form.data("kendoValidator");


            alert('validator.validate()' + validator.validate());

            // Validate given input elements
            if (!validator.validate()) {
                // Prevent the wizard's navigation
                e.preventDefault();

}

Shows true and goes to next step

 

Second approach 

1. Use the .Tag("form")

 

 @(
     Html.Kendo().Wizard()
     .Name("LicenseWizard")
     .Tag("div")
     .Steps(s =>
     {

         s.Add<WizardViewModel>()
         .Title("County")
         .ClassName("CountyClass")
         .Form(f => f
         .Name("FormCounty")
         .FormData(Model)
         .Items(items =>

 

2. In the

 

// Validate
if (stepIndex == 2) {

    var form = $("#LicenseWizard-1").find('form');

     var validator = form.data("kendoValidator");
    // Instantiate a validator for the container element


    // Get the validator's reference
    var validator = $(container).kendoValidator().data("kendoValidator");

    alert('validator.validate()' + validator.validate());

    // Validate given input elements
    if (!validator.validate()) {
        // Prevent the wizard's navigation
        e.preventDefault();

 

Even this returns true

• Custom rules at the begining , which work on validate blur

 $(function () {
     $("#LicenseWizard").kendoValidator({
         rules: {
             requiredIfValue: function (input) {
                 //debugger;

if (input.is("[data-val-requiredifvalue]") && !input.val()) {

....

}

minagedate: function (input) {



    if (input.is("[id ='PartyOne.Pty1DateOfBirth']") || input.is("[id ='PartyTwo.Pty2DateOfBirth']")) {
        var value = $(input).val();
     ...............// 

        //console.log('todayMinus16' + todayMinus16);

        var result = (todayMinus16 >= birthdate);

        return result;
    }

 

   Question : minagedate validate on blur works . When I click on next , on Step 2 , the container in the approach when i use a div tag on wizard is the form that I get manually and in the second approach it is container that I get using the step method. 

 

I defined rules at the main wizard level ----

 $(function () {
     $("#LicenseWizard").kendoValidator({

 

how can make the validator.validate() false in my steps when there is something on the custom rules (that also show up on validate on blur) ? 

 

 

 

[Vasudha]

Forgot to mention : 

If I use  var validator = $("#LicenseWizard").kendoValidator().data("kendoValidator"); , it always returns false , no matter what , may be because it wants to validate the values in the next step too. 

 

[Mihaela]

Hello Vasudha,

Since you have submitted the same query as a support ticket, I will post the answer here in case someone else has the same question:

By design, the form integrated inside the Wizard has a built-in Validator that is enabled by default:

Having this in mind, you can extend the rules of the default Validator to add the desired custom rules, as per the example below:

@(Html.Kendo().Wizard()
        .Name("LicenseWizard")
        .Tag("div")
        .Steps(s =>
        {
            s.Add<WizardViewModel>()
            .Title("County")
            .ClassName("CountyClass")
            .Form(f => f
            .Name("FormCounty")
            .Validatable(v =>
            {
                v.ValidateOnBlur(tr);
                v.ValidationSummary(vs => vs.Enable(false));
            })
            .FormData(Model)
            .Items(items =>
            {
                ...
            }))
            ...
        })
)

<script type="text/javascript">
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, { // Extend the built-in form Validator
            rules: {
                minagedate: function (input) { // define the custom rule
                    if (input.is("[id ='Age']")) {
                        var value = $(input).val();
                        var result = (value < 16);
                        input.attr("data-minagedate-msg", "Min age has to be 16 years");
                        return !result;
                    }
                    return true;
                }
            }
        });
    })(jQuery, kendo);
</script>

As a result, the user will not be able to go to the next step if the "minagedate" rule returns "false".

Regards,
Mihaela
Progress Telerik