Telerik下拉框未选择项时验证错误消息不显示问题

你的验证逻辑失效主要有几个核心原因：

1. 原生input被设置为disabled，浏览器会自动忽略禁用元素的表单验证，导致checkValidity()完全不起作用
2. 直接操作原生input元素无法获取Kendo DropDownList的真实选中状态，需要通过Kendo控件实例来获取值
3. 验证函数语法不完整（缺少闭合大括号），且未阻止表单默认提交行为，导致验证不通过时页面直接刷新，错误消息无法显示

修复步骤与代码示例 #

1. 修改DropDownList的HTML标记

移除原生input的disabled属性，改用Kendo控件的enable配置控制可用性，确保元素能参与表单验证：

<div class="col-md-6">
    <label style="font-weight:bold" class="control-label required" for="AwardId">Nominated for these Awards</label>
    <!-- 移除disabled属性，保留required -->
    <input id="AwardName" name="AwardName" required="required" style="width:100%" type="text" value="" />
    <script>
        kendo.syncReady(function(){
            jQuery("#AwardName").kendoDropDownList({
                "autoBind":false,
                "cascadeFrom":"EmployeeNumber",
                "dataTextField":"AwardCategory1",
                "dataValueField":"AwardId",
                "enable":false, <!-- 保留Kendo的enable控制可用性 -->
                "optionLabel":"Select award...",
                "dataSource":{
                    "transport":{
                        "read":{"url":"/AdditionalInformation/Cascading_GetAwards","data":filterAwards},
                        "prefix":""
                    },
                    "serverFiltering":true,
                    "filter":[],
                    "schema":{"errors":"Errors"}
                }
            });
        });
    </script>
    <!-- 用于显示错误消息的容器 -->
    <div id="demo" style="color: #dc3545; margin-top: 6px;"></div>
</div>

2. 修复提交按钮与验证逻辑

通过Kendo控件实例获取选中值，完善验证函数并阻止表单默认提交：

<input type="submit" value="Submit" class="btn btn-primary" onclick="return checkValidity()" />

<script>
function checkValidity() {
    // 获取Kendo DropDownList的实例
    const dropdown = $("#AwardName").data("kendoDropDownList");
    const errorBox = document.getElementById("demo");
    
    // 清空之前的错误消息
    errorBox.innerHTML = "";

    // 仅当控件启用时验证选中状态
    if (dropdown.enabled() && !dropdown.value()) {
        errorBox.innerHTML = "Please select an award.";
        // 返回false阻止表单提交
        return false;
    }

    // 验证通过，允许表单提交
    return true;
}
</script>

关键说明 #

• Kendo DropDownList的enable: false会将控件设置为不可交互，但不会将底层input标记为disabled，因此能正常参与表单验证
• 使用dropdown.value()获取真实选中值，而非直接读取原生input的value属性，避免Kendo控件状态与原生元素不一致的问题
• 通过return false阻止表单默认提交行为，确保错误消息能在页面上显示

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