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

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 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,
    input.k-invalid
    {
        border: 1px solid red !important;
    }
    Here is a Dojo demo that uses this approach.

    Regards,
    Georgi Krustev
    Telerik
     

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top