[Solved] Validator stops displaying after .hideMessages called

[Robert]

Hi

We have a validator on our main view that works fine until we open a search modal.

Just before the modal is hidden we do a hide messages. After returning focus to the main view the validator is still being run (can see in debug) but messages aren't displaying. Have a good trawl around but can't find anything relevant in Forums. 

Would appreciate any suggestions?

Commenting .hideMessages() out fixes issues but has undesirable user experience, hence it's addition...

Thanks

Rob

// reset any validation warnings
$("body").kendoValidator().data("kendoValidator").hideMessages();

// close the modal
$("#myModal").modal("hide");

[Robert]

I found a work around on StackOverflow which seems to work...

StackOverflow solution

$(document.body).find("span.k-tooltip-validation").hide();

instead of ...  

$("body").kendoValidator().data("kendoValidator").hideMessages();

 

By the way here is a cut down obfuscated example of our validator .js 

$(function() {
    // document ready here
    // add the validation for input
    tpa.viewModel.validator = $("body").kendoValidator({
       validate: function(e) {

       },
        rules: {
            primaryName: function (input) {
                if (input.is("[name=PrimaryName]") && input.is("[required=required]")) {
                    tpa.checkUniquePrimary(input.val());
                    return tpa.regEx("[a-zA-Z0-9]{1,40}", input.val());
                }
                return true;
            },
            arn: function(input) {
                if (input.is("[name=SomethingElse]") && input.is("[required=required]")) {
                    return tpa.regEx("[0-9]{9}", input.val());
                }
                return true;
            },
            abn: function(input) {
                if (input.is("[name=Abn]") && input.is("[required=required]")) {
                    return tpa.regEx("[0-9]{11}", input.val());
                }
                return true;
            },
            afsl: function(input) {
                if (input.is("[name=SomeNumber]") && input.is("[required=required]")) {
                    return tpa.regEx("[0-9]{6}", input.val());
                }
                return true;
            },
            phone: function(input) {
                if (input.is("[name=Phone]") && input.is("[required=required]")) {
                    return tpa.regEx("[0-9]{0,14}", input.val());
                }
                return true;
            },
            hasAlternatives: function (input) {
                if (input.is("[name=AccessAllowed]")) {
                    if (input.val() === "2" && tpa.viewModel.model.alternatives.length < 1) {
                        return false;
                    }
                }
                return true;
            },
            effectiveTo: function (input) {
                if (input.is("[name=EffectiveTo]")) {
                    var et = kendo.parseDate(tpa.viewModel.model.effectiveTo, "dd/MM/yyyy");
                    if (tpa.viewModel.model.TypeId !== 4 && et === null) {
                        return false;
                    }
                    var today = new Date();
                    today.setHours(0, 0, 0, 0);
                    if (tpa.viewModel.model.TypeId !== 4) {
                        var day = 24 * 60 * 60 * 1000;
                        if (tpa.viewModel.model.effectiveFrom instanceof Date) {
                            var future = new Date(tpa.viewModel.model.effectiveFrom.getTime() + (3 * 365 * day) + day);
                            return tpa.viewModel.model.effectiveTo >= today && tpa.viewModel.model.effectiveTo <= future;
                        }
                        else {
                            return tpa.viewModel.model.effectiveTo >= today;
                        }
                    } else {
                        if (et === null || et >= today) { // Gov/Trustee can be blank or future date.
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
                return true;
            },
            effectiveFrom: function (input) {
                if (input.is("[name=EffectiveFrom]")) {
                    var ef = kendo.parseDate(tpa.viewModel.model.effectiveFrom, "dd/MM/yyyy");
                    if (ef === null) {
                        return false;
                    }
                    var today = new Date();
                    today.setHours(0, 0, 0, 0);
                    return tpa.viewModel.model.effectiveFrom <= today;
                }
                return true;
            },
        },
        messages: {
            somethingelse: "SomethingElse must be 9 digits",
            abn: "ABN must be 11 digits",
            somenumber: "SomeNumber number must be 6 digits",
            phone: "Phone number must be max 14 digits, no dashes etc",
            hasAlternatives: "No alternatives specified. You must include at least one for that Access type",
            effectiveTo: "Expiry date is required. It must be future dated, no more than 3 years. Please confirm date is correct",
            effectiveFrom: "Effective date is in the future. Please confirm date is correct",
        }
    });

But would love to know if this is a bug or we're just not using the .hideMessages() properly.

Rob

 

 

[Rosen]

Hello Robert,

The issue you have described is caused by instantiating a new Validator instance over the already existing one. The code in question:

$("body").kendoValidator().data("kendoValidator").hideMessages();

will first create a new Kendo Validator attached to the body element, then will retrieve the widget's instance and call its hideMessages method. Instead the code you be change to the following:

$("body").data("kendoValidator").hideMessages();

Note the missing kendoValidator call.

Regards,
Rosen
Telerik

 

 

[Robert]

Hi Rosen

Thanks. That did the trick and makes perfect sense when you explained it.

Cheers.

Rob