validation problem with dropdown

3 posts, 0 answers
  1. Sam
    Sam avatar
    1 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post


    this is not working anymore and used to work before and after update it stop working. I want the validation to change the color in only drop down. not on other controls.

    .k-dropdown  .k-tooltip-validation
              position: absolute;
             background-color: red


  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Nov 2012 Link to this post


    you forget to add semiColon in second line.

    .k-dropdown  .k-tooltip-validation
              position: absolute;
             background-color: red;


    @(Html.Kendo().DropDownListFor(model => model.CustomerID)
       <br />
       <div id="ddlContainer">
         @Html.ValidationMessageFor(m => m.CustomerID)
    <style type="text/css">
        #ddlContainer span.k-tooltip
            position: absolute;
            background-color: red;
            color: white;

    Jayesh Goyani
  3. Brian
    Brian avatar
    1 posts
    Member since:
    Feb 2014

    Posted 13 May 2015 Link to this post

    If you want to make a kendo dropdown's appearance change when it's invalid, this will help.


    //kendo validation is required for validation of kendo controls to work properly.
        errorTemplate: ""//remove the additions kendo places to the right of each field.
        validate: function (e) {
            //Bizarrely, Kendo dropdowns require special attention.
            //Span with k-dropdown are kendo dropdown controls. They contain an input, which is used to store the value,
            //and another span (which has .k-input-wrap) that controls the actual presentation.
            //The problem is that k-invalid is placed on the input, which isn't even visible. So, we have to
            //check the input for .k-invalid, and set a class on the span to control validation appearance.
            var dropDowns = $(".k-dropdown");
            $.each(dropDowns, function (key, value) {
                var input = $(value).find("input.k-invalid");    //this is where Kendo foolishly places k-invalid
                var span = $(this).find("span.k-dropdown-wrap"); //this span controls the dropdown's appearance.
                //manually set the validation attributes. Note that input-validation-error would have been a better
                //class to use here, but I think bootstrap.js must do some magic with it, because when I set it and then
                //manually remove it, that caused the span to mysteriously become display: none.
                if (input.size() > 0) { //if there is an input in here with k-invalid...
                } else {



        .dropdown-validation-error {
            border: 1px solid red !important;
            background-color: #fee !important;


    This should really work out of the box. Yeesh. :)

Back to Top