Kendo UI-Kendo验证程序

Question

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

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

我已自定义验证工具提示，以便在输入每个字段时显示在我想要的位置，并且此方法工作正常。 结果可以在下图中看到。

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

下图是单击“更新”按钮时发生的情况（注意，对话框相互重叠）。

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

这是我的代码：

<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（）函数，并且我仅尝试更新此模块，还有许多其他形式和使用该函数进行直接更改的验证对此。

Answer 1

我认为您的问题与日期时间确认有关。 将您的文化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上找到您所在国家的文化文件

Answer 2

在这里，您可以尝试执行以下操作：

$("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也可以在其他网格按钮上使用。

这是一个演示 。 尽管这并不是模块的确切工作方式，但我希望这种想法是相似的。

如果您想修复格式，那么我将不得不在顶部看到更多关于如何设置所有验证消息以及如何删除所有指针箭头的代码。