Kendo UI - Kendo Validator

时间:2014-06-19 13:06:50

标签: javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

我在我的应用程序中使用了Kendo UI的验证器。

我有一个表单来更新我的网格数据。

我已经定制了验证工具提示,以便在我输入每个字段时显示在我想要的位置,这样可以正常工作。 结果如下图所示。

enter image description here

但是,我遇到了一个问题,当我提交表单时,它似乎重新验证了我的表单,并弄乱了工具提示验证消息的位置。

下图是当我点击"更新"按钮(注意,对话相互重叠)。

enter image description here

我的首选目标是禁用“更新”按钮,直到更正所有字段,或者,如果不可能,则保持与第一张图像相同的格式。

这是我的代码:

<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>

提交表单的按钮是:

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

我还应该注意,此时我无法编辑kendoValidator()函数,因为这是在开发中,我只是尝试更新此模块,还有许多其他形式和验证使用该函数直接改变它。

2 个答案:

答案 0 :(得分:4)

我认为你的问题是关于日期时间的确认。 将您的culture js文件放入/Scripts/kendo/2014.1.528/cultures/ 并在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>

您可以在上找到您所在国家/地区的文化文件 C:\ Program Files(x86)\ Telerik \ UI for ASP.NET MVC Q1 2014 \ js \ cultures

答案 1 :(得分:1)

在这里,您可以尝试这样做:

$("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检测到k-grid-update类以触发/提交更新。没有它,它永远不会触发,这有效地禁用了按钮的功能(但按钮仍然看起来可点击)。另一方面,k-state-disabled更改了UI以使按钮看起来被禁用(纯粹是UI,它不会阻止更新)。因此,使用这两者的组合,它将完全禁用更新按钮。

验证并且每个字段都正确无误后,您只需重新添加k-grid-update并删除k-state-disabled即可将其撤消。顺便说一下,k-state-disabled也可以在其他网格按钮上工作。

这是DEMO。虽然这不完全是你的模块的工作方式,但我希望这个想法与此类似。

Disabling the update

如果您想要修改格式,那么我必须查看更多关于如何在顶部设置所有验证消息以及如何删除所有指针箭头的代码。