This is a migrated thread and some comments may be shown as answers.

Kendo DropDownListfor validation using jquery unobtrusive

4 Answers 157 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Aarti
Top achievements
Rank 1
Aarti asked on 06 Oct 2014, 11:37 PM
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.

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 08 Oct 2014, 02:35 PM
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.

 
0
Marvin
Top achievements
Rank 1
answered on 04 Jan 2018, 04:20 PM

The example does not validate the kendoDropDownList. 

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

0
Nencho
Telerik team
answered on 08 Jan 2018, 11:24 AM
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
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.
0
Marvin
Top achievements
Rank 1
answered on 08 Jan 2018, 03:27 PM
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.
Tags
DropDownList
Asked by
Aarti
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Marvin
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or