jQuery验证kendo dropdownlist不起作用

Question

我们最近将我们的项目从jQuery 1.8.3升级到3.7.1。 同时，我们从2013.1.514.340到2024.3.806.462升级了Kendo UI 我们还将jQuery验证从1.8.0升级到1.21.0

升升级，kendo下拉列表上的验证不再起作用。 如果您留下选项标签（“请选择一个值”），则通过验证。

升级以下代码按预期工作 - 如果选项标签是选定的值，则将失败验证并向用户弹出一条消息，要求选择选择。

.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);
}

Answer 1

window.addEventListener("load", () => {
  const drugDropDown = document.getElementById("DrugListType");
  if (!drugDropDown) return;
  const validateDrugDropDown = () => drugDropDown
    .setCustomValidity(!drugDropDown.value ? "Please select a drug from the NDC drop-down list." : "");

  drugDropDown.addEventListener("change", validateDrugDropDown);

  // Attach validation on form submit
  document.getElementById("Form1").addEventListener("submit", (e) => {
    validateDrugDropDown();
    if (!drugDropDown.value) {
      drugDropDown.reportValidity();
      e.preventDefault(); // stop submission
    }
  });
});