javascript - Kendo UI - Kendo Validator - Stack Overflow

admin管理员组

文章数量:1391947

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.

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.

• javascript
• jquery
• kendo-ui
• kendo-grid
• kendo-asp-mvc

Share Improve this question Follow asked Jun 19, 2014 at 13:06 MarkMark 4,87388 gold badges5656 silver badges9393 bronze badges 2

• 1 hi i am new to the kendo, i just want to render the datepicker in my .cshtml page, can you help to start, actually i am doing but never succeeded.it works correct in my simple html page but when i want to add this in my mvc projectit doesnt, – Jot Dhaliwal Commented Jul 11, 2014 at 14:28
• are doing the project in mvc? – Jot Dhaliwal Commented Jul 11, 2014 at 14:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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 bo of these two, it will disable the update button pletely.

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.

本文标签： javascriptKendo UIKendo ValidatorStack Overflow