Kendo Validator Not Blocking Form Submission

[Brian]

Hi,

I have a Kendo Validator with some custom rules, including hitting an API to prevent name duplication.

            rules: {
                noDups: function (input: any) {
                    if (input[0].id == "Name") {

                        let url = $("#duplicate-link").data("url") + "?name=" + input.val();

                        $.get(url, function (response) {
                            return !response;
                        });
                    }

                    return true;
                },

Basically, if the name comes back as "already found" from the API, return false.

I have logged the output and the response is returning false when the name matches.

However, when validating the form, only the required validator is firing.  I don't see the false return value affecting the validator's red box and validation message, and the form still submits.

        $("#submit").on("click", function () {
            let validator = $("#form1").data("kendoValidator");

            if (validator.validate()) {
                console.log('validated');
            }
        });

                @(Html.Kendo().TextBoxFor(m => m.Name).HtmlAttributes(new { @class = "form-control", placeholder = "Application Name", required = true, data_noDups_msg = "This field is required" }))

Any thoughts?  Thanks!

[Aleksandar]

Hi Brian,

We have the following knowledgebase article that demonstrates how to implement remote validation for the Kendo Validator. The example is for ASP.NET MVC and uses a Grid, though the approach would be the same for ASP.NET Core. You can review a runnable sample in this Demo - enter an existing ProductName and the validation will fire.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Brian]

Hi Aleksandar,

Unfortunately, this doesn't answer my question.  All of my other validation is working except for this one field, and the remote validation is correctly returning a true/false when valid/invalid.  It just isn't blocking the form submission or highlighting the field red when it fails validation.

Thanks!

[Brian]

The debug is saying the control is validated when the custom rule has failed.  I'm seeing the red box around the field, the error message is displaying, but the form is still posting.

        let validator = $("#form1").kendoValidator({
            messages: {
                remote: "This name already exists",
            },

            rules: {
                remote: function (input: any) {
                    if (input.val() == "" || !input.attr("data-val-remote-url")) {
                        return true;
                    }

                    if (input.attr("data-val-remote-recieved")) {
                        input.attr("data-val-remote-recieved", "");

                        if (input.attr("data-val-remote") == false) {
                            input.addClass("is-invalid");
                        } else {
                            input.removeClass("is-invalid");
                        }

                        return (input.attr("data-val-remote"));
                    }

                    let validator = this;
                    var currentInput = input;

                    if (input[0].id == "Name") {

                        let url = $("#duplicate-link").data("url") + "?name=" + input.val();

                        $.get(url, function (response) {
                            if (response == true) {
                                input.attr("data-val-remote", "");
                            }
                            else {
                                input.attr("data-val-remote", response);
                            }
                            input.attr("data-val-remote-recieved", true);
                            validator.validateInput(currentInput);
                        });
                    }

                    return true;
                }
            }
        }).data("kendoValidator");

        $("#submit").on("click", function (e) {
            if (validator.validate()) {
                console.log('validated');
            }
            else {
                console.log('not validated');
            }
        });

I did have to manually highlight the field red, maybe that's part of it?  But the custom rule is returning the correct value and is displaying the error message as normal.

Thanks!

[Nikolay]

Hi Brian,

This is a bug and I have logged it for fixing. Please refer to the below links:

• Feedback portal: https://feedback.telerik.com/aspnet-core-ui/1599727-kendo-remote-validator-not-blocking-form-submission
• GitHub: https://github.com/telerik/kendo-ui-core/issues/7239

As a token of gratitude, I have added some Telerik Points to your account.

regards,

Nikolay