升级后Kendo DropDownList的jQuery Validation验证失效求助

升级背景 #

• jQuery：从1.8.3升级至3.7.1
• Kendo UI：从2013.1.514.340升级至2024.3.806.462
• jQuery Validation：从1.8.0升级至1.21.0

问题现象 #

• Kendo下拉列表保留默认选项--Please Select a Value--时，验证仍会通过；升级前此场景会触发验证失败，并提示用户选择有效选项
• 问题影响应用内所有（数百个）下拉列表，且所有Kendo控件均受影响
• 调试发现：即使控件为空，每个验证元素的Complete属性仍为true

相关代码示例 #

.aspx代码 #

<asp:Content runat="server" ID="Content2" ContentPlaceHolderID="HeadContent">
    <script src="<%: Url.ContentExt("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
            errorDialog = new ErrorDialog("Form1", "divStatus");
            errorDialog.ShowServerMessageDialog(true);
            ClientValidationRuleRequest();
        });
    </script>
</asp:Content>

<asp:Content runat="server" ID="Content1" ContentPlaceHolderID="MainContent">
    <div class="inputFieldTitle" for="DrugList">
        NDC:  <span>                    
            <div class="DrugDropDown">
                <%: Html.Kendo().DropDownList()
                    .Name("DrugListType")
                    .DataValueField("NDC")
                    .DataTextField("Medication")
                    .OptionLabel("--Please Select a Value--")
                    .Events(b=>b.Change("ChangeDrug"))
                    .HtmlAttributes(new {style = "width: 600px;"})
                    .DataSource(source =>
                        source.Read(read => read.Action("AjaxGetAllDrugs", "MAIN"))
                              .ServerFiltering(true)
                    )
                %>
            </div>
        </span>
    </div>
</asp:Content>

.js代码 #

function ClientValidationRuleRequest() {
    var DrugDropDownRule = {
        required: true,
        messages: {
            required: "Please select a drug from the NDC  drop down list."
        }
    };

    errorDialog.AddClientValidationRule("#DrugListType", DrugDropDownRule, true);
}

$("#SaveSubmission").click(function () {        
    var valid = errorDialog.ValidateForm(true);
    if (valid) {
    
        blah blah blah
    }
    return false;
});

this.ValidateForm = function (complete) {
    var validator = $(_selectorForm).validate();      

    // clear any left over server side messages so they do not get re-displayed
    $(_selectorErrorLabelContainer).empty();
    $(_selectorValidationMessageText).empty();

    validator.settings.rules = {};
    validator.invalid = {};
    for (var i = 0; i < _listValidationElements.length; i++) {
        try {
            validator.element(_listValidationElements[i].Selector);
            if (eval(complete) || eval(!_listValidationElements[i].Complete)) {
                $(_listValidationElements[i].Selector).rules("add", _listValidationElements[i].Rule);
                validator.element(_listValidationElements[i].Selector);
            }
        } catch (e) {
            console.log(e);
        }
    }

    if (validator.numberOfInvalids() > 0 || _listCustomValidationMessages.length > 0) {
        // append custom validation messages
        var customContent = "";
        if (_listCustomValidationMessages.length > 0) {
            for (var i = 0; i < _listCustomValidationMessages.length; i++) {
                customContent += ErrorHelperCreateValidationEntry("", _listCustomValidationMessages[i]);
            }
            _listCustomValidationMessages = new Array();
        }

        // copy content from jQuery Validation container to our own validation message container
        $(_selectorValidationMessageText).html($(_selectorErrorLabelContainer).html());
        $(_selectorValidationMessageText).append(customContent);

        this.ShowValidationDialog();
        return false;
    }

    return true;
}

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