.NET Core中Kendo UI Core客户端验证失效问题排查

针对Kendo UI Editor组件无法触发ASP.NET Core客户端必填验证的问题，可按以下步骤修复：

1. 保证脚本引用顺序正确 #

ASP.NET Core客户端验证依赖jQuery、jQuery Validation、jQuery Unobtrusive Validation，这些脚本必须在Kendo UI脚本之前加载，否则验证逻辑无法和Kendo组件集成。

在页面底部或布局文件中按顺序引入：

<!-- 基础依赖脚本 -->
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

<!-- Kendo UI 脚本 -->
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>

2. 移除Editor的冗余value属性 #

原代码中手动设置value="@{<text></text>}"会干扰模型绑定和验证逻辑，导致验证无法识别字段是否为空。移除该属性后，Editor会自动绑定模型值：

<kendo-editor encoded="false" for="@Model.Notes" tag="textarea"
              placeholder="Please Enter description and Location"
              style="width: 100%; height: 200px;">
    <tools>
        <tool name="bold"></tool>
        <tool name="italic"></tool>
        <tool name="underline"></tool>
        <tool name="justifyLeft"></tool>
        <tool name="justifyCenter"></tool>
        <tool name="justifyRight"></tool>
        <tool name="insertUnorderedList"></tool>
        <tool name="insertOrderedList"></tool>
        <tool name="outdent"></tool>
        <tool name="indent"></tool>
        <tool name="createLink"></tool>
        <tool name="unlink"></tool>
        <tool name="fontName"></tool>
        <tool name="fontSize"></tool>
        <tool name="foreColor"></tool>
        <tool name="backColor"></tool>
    </tools>
</kendo-editor>
<span asp-validation-for="@Model.Notes" class="text-danger"></span>

3. 确认项目验证配置正确 #

• 在_ViewImports.cshtml中确保导入了必要的TagHelper：

  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  @addTagHelper *, Kendo.Mvc
  

• 在Program.cs中启用数据注解验证和Kendo服务：

  builder.Services.AddControllersWithViews()
      .AddDataAnnotationsLocalization()
      .AddKendo();
  

4. 确保验证触发逻辑正常 #

使用标准的提交按钮（type="submit"），点击时会自动触发客户端验证：

<button type="submit" class="btn btn-primary">提交</button>

如果使用Kendo按钮，需手动调用验证方法：

$("#kendoSubmitBtn").click(function() {
    const form = $("form");
    if (form.valid()) {
        form.submit();
    }
});

内容的提问来源于stack exchange，提问作者maged gamil