[Solved] Highlighting controls on validation

[AP]

From another post, I was able to apply the styles:-

 

.k-widget > span.k-invalid,input.k-invalid

{

  border: 1px solid red !important;

}

 

Which changes textbox borders to red, where validation has failed. This works, but I would also like to apply the same style to text areas and kendo dropdown lists. How can I achieve this?

 

Thanks

[Kiril Nikolov]

Hello Andrew,

This approach will not work for the DropDownList widget as it has different rendering. However a solution is discussed in the following forum topic:

http://www.telerik.com/forums/validation-problem-with-dropdown

Regards,
Kiril Nikolov
Telerik

 

 

[AP]

Thanks. I've managed to get the drop-downs highlighting now (code below)

var validator= $('#frm').kendoValidator({
            validate:function(e){

                var dropDowns = $(".k-dropdown");

                $.each(dropDowns, function (key, value) {



                    var input = $(value).find("input.k-invalid");

                    var span = $(this).find("span.k-dropdown-wrap");

                    if (input.size() > 0) { //if there is an input in here with k-invalid...

                        $(span).addClass("dropdown-validation-error");

                    } else {

                        $(span).removeClass("dropdown-validation-error");

                    }

                });
            }
        }).getKendoValidator();

        var x = validator.validate();

And the style:-

.dropdown-validation-error {

       border: 1px solid red !important;

       background-color: #fee !important;

   }

However, what style can I use to highlight text areas?

[Kiril Nikolov]

Hello Andrew,

You need to select the textarea with the corresponding css class and apply the same approach as the one for the dropdownlist.

Regards,
Kiril Nikolov
Telerik