Kendo DropDownListfor validation using jquery unobtrusive

5 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
    3740 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.

  3. Marvin
    Marvin avatar
    2 posts
    Member since:
    Aug 2011

    Posted 04 Jan in reply to Georgi Krustev Link to this post

    The example does not validate the kendoDropDownList. 

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

  4. Nencho
    Nencho avatar
    1710 posts

    Posted 08 Jan Link to this post

    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:

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marvin
    Marvin avatar
    2 posts
    Member since:
    Aug 2011

    Posted 08 Jan in reply to Nencho Link to this post

    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.
Back to Top