本文详解如何在使用 Kendo UI DropDownList 的场景下，对禁用状态下的隐藏输入框（）进行 HTML5 表单验证，并在用户未选择项时准确显示 required 校验错误信息。
本文详解如何在使用 kendo ui dropdownlist 的场景下，对禁用状态下的隐藏输入框（``）进行 html5 表单验证，并在用户未选择项时准确显示 `required` 校验错误信息。
在基于 Kendo UI 的表单中，DropDownList 实际渲染时会将原始 <input> 元素作为“占位控件”，其值由 Kendo 内部管理。但关键点在于：HTML5 原生验证（如 required、checkValidity()）仅作用于该 <input> 元素本身，而非 Kendo 生成的 UI 组件。因此，若该 <input> 初始为空且标记了 required，它天然具备校验能力——但需确保校验逻辑被正确触发。
✅ 正确做法：绑定表单 submit 事件，而非按钮 click
直接在 <input type="submit"> 上使用 onclick 并调用 checkValidity() 存在两大缺陷：
- 无法拦截键盘回车提交等非点击触发方式；
-
onclick中未阻止默认提交行为，导致页面刷新、错误提示一闪而逝。
应改用标准的表单级验证流程：
<form id="myForm">
<div class="col-md-6">
<label class="control-label required" for="AwardId">Nominated for these Awards</label>
<input id="AwardName" name="AwardName" required style="width:100%" type="text" value="" />
<!-- Kendo 初始化脚本（保持不变） -->
<script>
kendo.syncReady(function() {
$("#AwardName").kendoDropDownList({
autoBind: false,
cascadeFrom: "EmployeeNumber",
dataTextField: "AwardCategory1",
dataValueField: "AwardId",
enable: false,
optionLabel: "Select award...",
dataSource: {
transport: {
read: { url: "/AdditionalInformation/Cascading_GetAwards", data: filterAwards }
},
serverFiltering: true,
schema: { errors: "Errors" }
}
});
});
</script>
</div>
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
<!-- 错误提示容器 -->
<div id="demo" style="color:red; margin-top:8px;"></div>
<script>
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // 阻止默认提交，避免页面跳转
const input = document.getElementById("AwardName");
// 注意：Kendo 会同步更新 input.value，但初始为空时 checkValidity() 才有效
if (!input.checkValidity()) {
document.getElementById("demo").textContent = input.validationMessage || "Please select an award.";
input.focus(); // 提升用户体验：聚焦到问题字段
return;
}
// 若通过校验，可手动提交或执行 AJAX
// this.submit(); // ❌ 不要在此处调用，会再次触发 submit 事件（循环）
// 推荐：使用 fetch 或 $.ajax 提交数据
console.log("Form is valid. Proceed with submission.");
});
</script>⚠️ 重要注意事项
disabled="disabled"会导致checkValidity()始终返回true：HTML 规范规定禁用元素不参与约束验证。若你确实需要禁用下拉框（如依赖级联），请确保其关联的<input>不可禁用（即移除disabled="disabled"），而仅通过 Kendo 的enable: false控制 UI 状态。否则验证将失效。Kendo 同步机制：
kendoDropDownList会在用户选择后自动更新<input>的value属性。只要input未被禁用，required校验即可生效。-
增强兼容性建议：对于旧版浏览器或复杂场景，可补充手动判断：
const ddl = $("#AwardName").data("kendoDropDownList"); if (!ddl || !ddl.value()) { document.getElementById("demo").textContent = "Selection is required."; return false; }
✅ 总结
实现空值校验的核心是：
① 确保 <input> 元素具备 required 属性且未被 disabled；
② 在 <form></form> 的 submit 事件中调用 preventDefault() + checkValidity()；
③ 使用 validationMessage 获取标准提示，或降级为自定义文案；
④ 避免在按钮 onclick 中处理，防止绕过验证。
如此即可稳定、语义化地完成 Kendo 下拉框的必填校验与错误反馈。
