Kendo DropDownListfor validation using jquery unobtrusive

2 posts, 0 answers
  1. Aarti
    Aarti  avatar
    20 posts
    Member since:
    Mar 2014

    Posted 06 Oct 2014 Link to this post


    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,
                        length = mutations.length;

                    for (; idx < length; idx++) {
                        mutation = mutations[idx];
                        if (mutation.attributeName === "class") {
                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 = $(;

                   .toggleClass("k-invalid", element.hasClass("input-validation-error"));

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

        #innerList li {
            margin: 10px 10px;

    Can you please let me know how can I get a red border around required drop down list when form is submiited.
  2. Georgi Krustev
    Georgi Krustev avatar
    3724 posts

    Posted 08 Oct 2014 Link to this post

    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,
        border: 1px solid red !important;
    Here is a Dojo demo that uses this approach.

    Georgi Krustev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top