We recently upgraded our project from jQuery 1.8.3 to 3.7.1. At the same time we upgraded Kendo UI from 2013.1.514.340 to 2024.3.806.462 We also upgraded jQuery Validation from 1.8.0 to 1.21.0

Since the upgrades the validation on Kendo dropdown lists is no longer working. If you leave the option label ("Please select a value") it passes the validation.

Prior to the upgrades the code below worked as expected - if the option label was the selected value it would fail validation and pop up a message to the user that a selection is required.

Edited to add: Below is a sample of one dropdown list, but this is affecting all of them throughout the application (hundreds).

Edited again: It looks like it's not just dropdown lists, but all Kendo controls. In debug every validation element has "Complete: true" even when blank.

I've added more of the jQuery validation code.

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

We recently upgraded our project from jQuery 1.8.3 to 3.7.1. At the same time we upgraded Kendo UI from 2013.1.514.340 to 2024.3.806.462 We also upgraded jQuery Validation from 1.8.0 to 1.21.0

Since the upgrades the validation on Kendo dropdown lists is no longer working. If you leave the option label ("Please select a value") it passes the validation.

Prior to the upgrades the code below worked as expected - if the option label was the selected value it would fail validation and pop up a message to the user that a selection is required.

Edited to add: Below is a sample of one dropdown list, but this is affecting all of them throughout the application (hundreds).

Edited again: It looks like it's not just dropdown lists, but all Kendo controls. In debug every validation element has "Complete: true" even when blank.

I've added more of the jQuery validation code.

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

• jquery
• kendo-ui

• Can you provide a minimal reproducible example? – Lajos Arpad Commented Feb 4 at 17:47

2 Answers 2

No need for jQuery

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

I managed to fix this after a few days of banging my head against the wall.

On the Telerik forums for Kendo I discovered that jQuery Validate does not validate hidden inputs and Kendo's inputs are considered hidden.

I fixed by editing jQuery.validate.js to no longer ignore hidden fields (replacing ignore: ":hidden"):

$.extend( $.validator, {

    defaults: {
        messages: {},
        groups: {},
        rules: {},
        errorClass: "error",
        pendingClass: "pending",
        validClass: "valid",
        errorElement: "label",
        focusCleanup: false,
        focusInvalid: true,
        errorContainer: $( [] ),
        errorLabelContainer: $( [] ),
        onsubmit: true,
        ignore: [],
        ignoreTitle: false,
                    
        blah blah blah....