Kendo UI - Kendo Validator

Question

I'm using Kendo UI's validator in my application.

I have a form to update my grid data.

I have customized the validation tool-tips to appear where I want them as I enter each field, and this works fine. The result can be seen in the image below.

However, I am having a problem, that when I submit the form, it appears to revalidate my form, and mess up the location of the tool-tip validation message.

The picture below is what happens when I click the "Update" button (notice, the dialogues overlapping each other).

My preferend goal is to disable the Update button untill the all fields are corrected, or, if that is not possible, to keep the same formatting as the first image.

Here is my code:

<div id="ValidationErrors">
       <span class='k-invalid-msg' data-for="PhoneNumber"  ></span>
       <span class='k-invalid-msg' data-for="Extension" ></span>
       <span class='k-invalid-msg' data-for="PreferredContactStartTimeDt" ></span>
       <span class='k-invalid-msg' data-for="PreferredContactEndTimeDt"></span>
       <span class='k-invalid-msg' data-for="TimeZone"></span>
        <script>
            $("input").focusout(function () {
                $("#ValidationErrors").kendoValidator();
                if ($("input").hasClass("k-textbox k-invalid"))
                {
                    $(this).css("border", "solid 1px red");
                }
            });
        </script>
       <style>
           .k-widget.k-tooltip-validation {
                margin-bottom:5px;
                display:block;
                padding:6px;
           }
           #ValidationErrors {
                margin-bottom:10px;
           }
            .k-invalid-msg {
                display:none;
           }
       </style>
   </div>

The button that submit's the form is:

<a class="k-button k-button-icontext k-grid-update" href="#"><span class="k-icon k-update"></span>Update</a>

I should also note, that I can not edit the kendoValidator() function at this point, as this is in development, and I am only trying to update this module, there are to many other forms and validations using that function to make direct changes to it.

Answer 1

I think your problem is about datetime confirmation. Put your culture js file into /Scripts/kendo/2014.1.528/cultures/ and referance it in Layout.cshtml

<script src="@Url.Content("~/Scripts/kendo/2014.1.528/cultures/kendo.culture.tr-TR.min.js")"></script>
<script> kendo.culture("tr-TR") </script>

you can find your country's culture file on C:\\Program Files (x86)\\Telerik\\UI for ASP.NET MVC Q1 2014\\js\\cultures

Answer 2

Here, you can try doing something like this:

$("input").focusout(function () {
    $("#ValidationErrors").kendoValidator();
    if ($("input").hasClass("k-textbox k-invalid"))
    {
        $(this).css("border", "solid 1px red");
        $(".k-button.k-button-icontext.k-grid-update").removeClass("k-grid-update").addClass("k-state-disabled");
    }
    else{
        $(this).css("border", "solid 1px #c5c5c5");
        $(".k-button.k-button-icontext.k-primary").addClass("k-grid-update").removeClass("k-state-disabled");
    }
});

Kendo detects k-grid-update class to trigger/submit the update. Without it, it will never not fire, this effectively disables the button's functionality (but button will still look clickable). On the other hand, k-state-disabled changes the UI to make the button look disabled (purely UI, it will not prevent the update). So with the combo of these two, it will disable the update button completely.

When you validate and every field is correct, then you just reverse it by re-adding k-grid-update and removing k-state-disabled . By the way, k-state-disabled can work on other grid buttons as well.

Here is a DEMO . Although this is not exactly how your module works, the idea is similar I should hope.

If you want to fix the formatting instead, then I'd have to see more code on how you set up all the validation messages at the top and how you remove all the pointer arrows.