Kendo DropDownListfor validation using jquery unobtrusive

[Aarti]

Hi,

I wanted to achieve required filed validation on Drop Down list.Currently I am getting a pop up saying as required but unfortunately I couldn't get any red border around it, For rest of the controls on the page i get the red border. I tried below code but still i dont get any red border around drop down.

  $(document).ready(function () {
        /* Bind Mutation Events */
        var elements = $("#AddUserForm").find("[data-role=combobox],[data-role=dropdownlist],[data-role=numerictextbox],[data-role^=date]");

        //correct mutation event detection
        var hasMutationEvents = ("MutationEvent" in window),
            MutationObserver = window.WebKitMutationObserver || window.MutationObserver;

        if (MutationObserver) {
            var observer = new MutationObserver(function (mutations) {
                var idx = 0,
                    mutation,
                    length = mutations.length;

                for (; idx < length; idx++) {
                    mutation = mutations[idx];
                    if (mutation.attributeName === "class") {
                        updateCssOnPropertyChange(mutation);
                    }
                }
            }),
            config = { attributes: true, childList: false, characterData: false };

            elements.each(function () {
                observer.observe(this, config);
            });
        } else if (hasMutationEvents) {
            elements.bind("DOMAttrModified", updateCssOnPropertyChange);
        } else {
            elements.each(function () {
                this.attachEvent("onpropertychange", updateCssOnPropertyChange);
            });
        }
});

  function updateCssOnPropertyChange(e) {
        var element = $(e.target);

        element.siblings("span.k-dropdown-wrap")
               .add(element.parent("span.k-numeric-wrap"))
               .add(element.parent("span.k-picker-wrap"))
               .toggleClass("k-invalid", element.hasClass("input-validation-error"));
    }

<style>
  .k-widget > span.k-invalid,
    input.k-invalid {
        border-color: red;
    }

    #innerList li {
        margin: 10px 10px;
    }
</style>

Can you please let me know how can I get a red border around required drop down list when form is submiited.

[Georgi Krustev]

Hi Aarti,

I believe that the problem is related to the specificity of the used CSS rule. Using !important definitely solves the problem:

.k-widget > span.k-invalid,
input.k-invalid
{
    border: 1px solid red !important;
}

Here is a Dojo demo that uses this approach.

Regards,
Georgi Krustev
Telerik

 

 

[Marvin]

The example does not validate the kendoDropDownList. 

Please provide an example in which the validation works for the kendoDropDownList. 

[Nencho]

Hello Marvin,

I have tested the previously provided example in this thread at my end and it is properly validating the DropDownList widget. Please note that its default value (in the dojo example) is valid. Hence, you can change it to the optionLabel - "--Start time--" and hit the validate button to test the behavior. Here is a video, demonstrating the behavior at my end:

https://monosnap.com/file/BJrS4GIxOntwBulrU9WbrTIym43w7e

Regards,
Nencho
Progress Telerik

[Marvin]

Thank you, Nencho.  You are quite right.  I hadn't set the dropdown to the invalid value of "--Start time--". Thanks for your quick response.