剑道用户界面 - 剑道验证器答案

【问题标题】：Kendo UI - Kendo Validator剑道用户界面 - 剑道验证器
【发布时间】：2014-07-10 20:46:04
【问题描述】：

我在我的应用程序中使用了 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() 函数，因为它正在开发中，我只是尝试更新此模块，还有许多其他表单和验证使用该函数来直接修改它。

【问题讨论】：

嗨，我是剑道新手，我只想在我的 .cshtml 页面中呈现日期选择器，你能帮忙开始吗，实际上我正在做，但从未成功。它在我的简单 html 中工作正常页面但是当我想在我的 mvc projectit 中添加它时，
在mvc中做项目？

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

【解决方案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

【讨论】：

【解决方案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 也可以在其他网格按钮上工作。

这是DEMO。虽然这不是你的模块的工作方式，但我希望这个想法是相似的。

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

【讨论】：